Создать новый браузер сегодня как никогда просто - есть Chromium, который можно форкнуть и добавить любой функционал. Компании делают это по той же логике, по какой когда-то создавались тулбары, - это всего лишь попытка вбить свой бренд пользователю и заставить его пользоваться другими продуктами компании. Но когда это делают независимые разработчики, продукт преследует цель сказать свое «му» на фактически статичном рынке браузеров. Не подумай - я не верю, что ты перейдешь на один из инди-браузеров. Но посмотреть, что они предлагают, интересно, не так ли?
Когда кажется, будто в какой-то области уже сказано все, что только можно, попытки сделать что-то по-другому захватывают дух: сперва думаешь - это дикость и утопия, но в результате ты начинаешь по-новому смотреть на лидеров рынка. По этой же причине в декабрьском номере ][ мы говорили о таких «странных» мобильных ОС, как Tizen, Firefox OS или Maemo. Поэтому, на мой взгляд, когда рассуждаешь об альтернативных браузерах, некорректно ставить вопрос ребром: переходить или нет. Нет, ты однозначно не перейдешь. Но можно попробовать повторить заинтересовавший функционал в твоем любимом браузере - для этого в каждом случае я постарался подобрать соответствующие расширения.
Идея создания браузера, тесно взаимодействующего с популярными социальными сетями, давно будоражит умы разработчиков. Попыток создать подобный комбайн было много, но, пожалуй, лучше справилась компания Rockmelt. Недаром они смогли получить серьезные финансовые инвестиции.
Одноименный проект был запущен в 2009-м и сразу заручился поддержкой одного из основателей компании Netscape. Год спустя была выпущена первая бета-версия, построенная на исходниках Chromium, за короткое время она успела собрать приличное количество фанатов. Основной фишкой Rockmelt стала ненавязчивость. Интеграция с Facebook и Twitter реализовывалась как дополнительная функциональность, а не назойливое дополнение.
Возможно, Rockmelt ждало светлое будущее, но в 2012 году разработчики свернули десктопную версию и сосредоточились на создании приложения для iOS. Несмотря на резкие перемены, мобильное приложение родилось быстро и получилось достаточно интересным.
Итак, нам предлагают решение, интересное в первую очередь интерфейсом. Управление браузером сосредотачивается вокруг единственной строки ввода. Она одновременно является адресной строкой и навигатором по различным группам контента. Например, ты можешь выбрать определенную тематику и сразу получить пачку превьюшек новых постов, ей соответствующих. Наличие дополнительных жестов позволяет выполнять ряд операций (расшаривание, лайки) одним кликом или взмахом.
Таким образом, вместе с браузером мы получаем генератор контента. При этом у нас есть возможность довольно легко влиять на условия выдачи материалов. Достаточно лишь зайти на любой сайт и кликнуть по пимпе «Follow». Ресурс добавляется в список наблюдаемых (учитывается RSS-лента), и новые материалы будут попадать в персональную новостную ленту.
Расширения:
Аудитория проекта: любители теории заговора
Первые релизы Google Chrome (впрочем, как и Chromium) наделали много шума. Пользователи обратили внимание не только на интересный интерфейс и скорость работы, но и на пару пунктов лицензионного соглашения, наносящих удар по приватности.
После этого начался бум статей на тему «Большой брат следит за тобой», в итоге вынудивший Google пересмотреть свои амбиции. Несмотря на это, в Chrome до сих пор присутствует несколько функций, так или иначе нарушающих личное пространство пользователя.
Например, всем известно, что сразу после установки Google Chrome генерирует уникальный идентификатор, который передается на сервер компании. Функция «предложения» действует аналогичным образом. Все вводимые данные отправляются в Google с целью выдачи предложений поиска. Примерно в таком же ключе идет рассуждение о других кошмарах: фоновой службе обновлений, отправке отчетов с ошибками и прочем.
Решить все озвученные проблемы готов SRWare. По факту это тот же Google Chrome, но с отсеченным языком. Никакую информацию на сервер Google он не передает, а еще приносит несколько приятных фишек:
Вердикт: Решение в первую очередь для приверженцев теории заговора. Дополнительных функций у браузера немного, и все они реализуются при помощи соответствующих расширений. В итоге получается, что все преимущества сводятся лишь к обеспечению дополнительного уровня приватности.
Аудитория проекта: веб-разработчики, энтузиасты
Еще один проект, выросший из форка Chromium, CoolNovo выгодно отличается от подобных альтернатив. Во-первых, разработчики из Поднебесной ставят перед собой масштабные цели, а не просто создают очередной клон с парой-тройкой дополнительных расширений. Во-вторых, они позиционируют свое решение в качестве полноценной замены Google Chrome. Идея такого решения успела завоевать сердца пользователей, а сам браузер получил ряд наград.
Одна из самых интересных и полезных функций - IE Tab. Моя основная деятельность отчасти связана с разработкой веб-приложений, а это подразумевает необходимость тестирования, правильно ли отображается верстка в браузерах, использующих для рендинга разные движки. IE Tab упрощает процесс тестирования в Internet Explorer. Она избавляет от необходимости запускать отдельную копию IE, а позволяет одним кликом сменить движок, используемый для рендинга.
Отдельного внимания также заслуживает управление жестами. В свое время я привык пользоваться подобной функциональностью в Opera, и надо сказать, что в CoolNovo реализация выполнена не хуже.
О неприкосновенности личного пространства разработчики придерживаются тех же взглядов, что и ребята из проекта SRWare Iron. Все тайные пересылки информации на серверы компании срезаны под корень.
Из других наиболее интересных функций стоит отметить:
Вердикт: CoolNovo был долгое время лидером среди альтернативных сборок на базе Chromium. Сегодня он продолжает держать позиции и по-прежнему остается хорошим решением для пользователей, желающих из коробки получить прокачанный браузер. Огорчает лишь, что в последнее время CoolNovo стал реже обновляться. Если так пойдет дальше, то рано или поздно конкурент в лице Chrome выкинет его с дистанции.
Расширения:
Аудитория проекта: Любители «все включено»
Maxthon - один из тех проектов, которые пережили второе рождение. Впервые он увидел свет в начале нулевых под псевдонимом MyIE. Тогда он представлял собой удобную обертку для ослика IE и ряд полезных функций. У него был встроенный менеджер закачек, табы вместо отдельных окон и другие полезности.
Когда начался бум Firefox, а впоследствии и Google Chrome, MyIE был вынужден уйти в тень на капитальный ремонт. Тотальная рихтовка вернула его с новым именем, обновленным набором функций и совершенно другим лицом.
Сегодня Maxthon больше похож на мощный интернет-центр, чем на просто браузер. Под капотом бродилки хостятся аж два движка - WebKit и Trident (используется в Internet Explorer). Причем в отличие от большинства подобных решений Maxthon способен самостоятельно определять страницы, для которых применение Trident более предпочтительно (как правило, это старые сайты). Я специально достал из кладовки один старый проект, адаптированный для просмотра в IE, и попробовал посмотреть его Maxthon. Недолго думая, бродилка сразу переключила отображение в ретрорежим и отрендерила страницу при помощи Trident. Помимо одновременной работы с двумя движками, наиболее сильные стороны Maxthon составляют собственное облако и наличие версий под мобильные платформы (Android, iOS). Собственная тучка не только позволяет складировать различную мелкую информацию вроде истории посещений, списка открытых страниц и подобных вещей, но и вполне сгодится для хранения файлов.
Например, меня очень порадовала возможность сохранения файлов с веб-страницы одним кликом в облако. Наиболее выгодно эта функция выглядит при работе на мобильнике/планшете. На этом полезности Maxthon не кончаются, а скорей только начинаются. Среди них:
Вердикт: Maxthon придется по душе как обычным пользователям, так и хардкорным гикам, ищущим новые приключения. Наличие версий под мобильные платформы и полноценное персональное облако - две ключевые функции, позволяющие Maxthon уделать многих конкурентов. Добавим к этому хорошую производительность, многочисленные победы в тестах на соблюдение веб-стандартов и получим практически идеальный, но малоизвестный браузер.
Расширения:
Аудитория проекта: любители всего свежего
Chromium стал отцом множества бродилок, основанных на WebKit. Он составляет фундамент почти каждого новоиспеченного браузера, и пошатнуть его доминирующее положение вряд ли возможно.
Итак, ты наверняка уже знаешь, что именно на этом проекте обкатываются все новинки перед тем, как попасть в Google Chrome. Поддержка новых HTML5-фишек, исправление страшных багов, новинки интерфейса - все это в первую очередь получают пользователи Chromium. Увы, за частоту обновлений приходится платить стабильностью. Крупные проблемы, не позволяющие нормально работать с браузером, бывают редко, но метко.
Выделить какие-то оригинальные интерфейсные фишки или возможности достаточно тяжело, так как они в большей мере представляют собой реализацию новых возможностей HTML5 и актуальны для веб-разработчиков, а не простых смертных.
Тем не менее ряд отличий, способных заинтересовать простого пользователя, у Chromium все же есть. Например:
Вердикт: Специальная версия Google Chrome для энтузиастов и гиков. Все самое новое появляется именно здесь, и названным группам пользователей это однозначно придется по душе. Простым смертным Chromium вряд ли подойдет, поскольку это продукт в первую очередь для испытаний. Да и мало найдется пользователей, жаждущих первыми протестировать, скажем, Battery API.
Аудитория проекта: веб-разработчики
Первоочередная цель разработчиков Avant Browser - предоставить пользователям простой способ совместить работу движков в рамках одного приложения. Казалось бы, задача не из легких, но, глядя на Avant Browser, убеждаешься в обратном. Разработчики не только смогли собрать воедино все популярные движки под одной оберткой, но и придумали легкий способ переключаться между ними. Смена движка рендеринга выполняется в пару кликов мышкой.
На этом суперполезные функции кончаются, и остаются типичные для подобных решений:
Вердикт: Avant Browser нельзя рассматривать в качестве полноценного приложения для повседневного использования. Это больше специализированное решение, способное сослужить хорошую службу веб-разработчикам, но не обычному пользователю. Каких-либо других интересных функций в Avant Browser попросту нет.
Огромное количество пользователей хотят своими руками создать браузер бесплатно. Но далеко не все знают, как это можно сделать. А между тем, его можно собрать при помощи стандартного компонента CppWebBrowser. Узнайте об этом подробнее.
Очень просто создать браузер в Borland C++ Builder v.6.0. Для этого совершенно не нужно писать свой движок. Можно воспользоваться готовым от internet explorer. Теперь нужно создать форму, а затем расположить на ней элемент CppWebBrowzer вместе с вкладкой internet. Данный элемент будет находиться справа, на панели компонентов. Вам достаточно просто перетащить его в рабочую область.
Затем, для того чтобы можно было вводить адрес, следует добавить кнопку button и поле для ввода текста - edit. Таким образом, должен получиться большой белый прямоугольник, в котором в дальнейшем и будут отображаться страницы сайта, а около него будут расположены строка для ввода адреса и кнопка для начала загрузки страницы.
Далее необходимо по клику на кнопке, либо в onEnter y edit`a описать следующие события: CppWebBrowser1->Navigate (StringToOleStr(Edit1->Text)). Теперь нужно добавить несколько привычных для нас кнопок, которые располагаются в стандартных браузерах. Например, такими кнопками могут быть кнопки: вперед, назад, остановить или домашняя страница. Для данных кнопок необходимо использовать следующие коды: CppWebBrowser1->GoForward(); - для кнопки вперед, CppWebBrowser1->GoBack(); - для кнопки назад, CppWebBrowser1->Refresh(); - для кнопки обновить, CppWebBrowser1->Stop(); - для кнопки стоп и CppWebBrowser1->GoHome(); - для кнопки домашняя страница.
После установки кнопок необходимо заменить компонент edit на ComboBox. Именно в нем будут записаны адреса страниц, которые были недавно открыты. Теперь вам известна основа решения задачи, как создать свой браузер.
Для этого вам понадобиться Pagecontrol. Его следует разместить на форме, а затем нажать по нему правой кнопкой мышки. После этого откроется меню, где нужно нажать на надпись New Page. При повторном нажатии, вы сможете получить вторую вкладку. Для того чтобы в каждой вкладке смог открыться браузер, следует дописать в обработчик OnKeyDown следующий компонент Form1:TCppWebBrowser* newbrowser.
Для того, чтобы рабочая область вашего браузера при разворачивании формы могла расположиться на все пространство, необходимо добавить в следующем событие onCreate такой компонент как Form1:PageControl1->Align = alClient. А чтобы кнопки были видны, следует поместить компонент CoolBar на вкладку. А потом перетащить на нее все кнопки. Затем необходимо все упорядочить. Для того, чтобы во время перехода с одной на другую страницу, в адресной строке были внесены изменения, следует добавить строчку в onBeforeNavigate2 следующий компонент CppWebBrowser:ComboBox1->Text = CppWebBrowser1->LocationURL.
Итак, вы узнали почти весь процесс, как создать новый браузер. Теперь осталось создать единую панель. Именно на ней и будут располагаться все кнопки. Кроме этого, именно эта панель и будет управлять активной страницей. В завершении процесса создания браузера, необходимо сделать кнопки прозрачными. Для этого следует загрузить картинки и добавить коды, с помощью которых вы и сможете установить прозрачность.
Теперь ваш новый браузер готов. Вы уже можете запускать его и начинать работать. Также можно создать браузер на основе chromium. Абсолютно любой пользователь может получить исходные коды и создать свой собственный браузер на основе этих открытых разработок. Узнать об уникальных особенностях браузеров, использующих ядро Хрома, можно из статьи, расположенной по следующему адресу: "
За последние несколько месяцев мы внесли множество улучшений в движок рендеринга Microsoft Edge (EdgeHTML), делая особый акцент на совместимости с современными браузерами и соответствии новым и грядущим стандартам. Помимо того, что EdgeHTML лежит в основе браузера Microsoft Edge, он также доступен для приложений на Universal Windows Platform (UWP) через элемент управления WebView . Сегодня мы хотим рассказать, как можно использовать WebView для создания своего браузера в Windows 10.
Используя стандартные веб-технологии, включая JavaScript, HTML и CSS, мы создали простое UWP-приложение, которое содержит внутри WebView и реализует базовую функциональность: навигацию и работу с избранным. Подобные приемы могут быть использованы в любом UWP-приложении для прозрачной интеграции веб-контента.
В основе нашего примера лежит мощный элемент управления WebView. Помимо комплексного набора API, данный элемент также позволяет преодолеть некоторые ограничения , присущие iframe, например, отслеживание фреймов (когда некоторый сайт меняет свое поведение в случае выполнения внутри iframe) и сложность определения загрузки документа. В дополнение x-ms-webview , - так WebView задается в HTML, - дает доступ к функциональности, не доступной в iframe, в частности, улучшенный доступ к локальному контенту и возможности делать снимки содержимого. Когда вы используете элемент управления WebView, вы получаете тот же самый движок, что и в Microsoft Edge.
Помимо JavaScript, мы также использовали немного HTML и CSS, а также некоторое количество строк кода на C++ для поддержки комбинаций клавиш, но это не требуется в простом случае.
Также мы пользуемся новыми возможностями нового ECMAScript 2015 (ES2015), поддерживаемыми в Chakra, JavaScript-движке, работающем в Microsoft Edge и элементе управления WebView. ES2015 позволил нам сократить количество генерируемого и шаблонного кода, тем самым существенно упростив реализацию идеи. Мы использовали следующие возможности ES2015 при создании приложения: Array.from() , Array.prototype.find() , arrow functions , method properties , const , for-of , let , Map , Object.assign() , Promises , property shorthands , Proxies , spread operator , String.prototype.includes() , String.prototype.startsWith() , Symbols , template strings и Unicode code point escapes .
После перехода на некоторую страницу, мы также обновляем текущее состояние кнопок, чтобы предотвратить «возможность» навигации, когда мы достигаем одного из концов стека навигации. Другими словами, мы отключаем кнопки навигации вперед или назад, проверяя свойства canGoBack или canGoForward на равенство false .
// Update the navigation state this.updateNavState = () => { this.backButton.disabled = !this.webview.canGoBack; this.forwardButton.disabled = !this.webview.canGoForward; }; // Listen for the back button to navigate backwards this.backButton.addEventListener("click", () => this.webview.goBack()); // Listen for the forward button to navigate forwards this.forwardButton.addEventListener("click", () => this.webview.goForward());
// Listen for the stop/refresh button to stop navigation/refresh the page this.stopButton.addEventListener("click", () => { if (this.loading) { this.webview.stop(); this.showProgressRing(false); this.showRefresh(); } else { this.webview.refresh(); } });
Однако современные браузеры пошли сильно дальше и внедряют дополнительную функциональность для удобства пользователей. Это добавляет некоторую сложность в реализации – и тут все зависит от сценариев, которые вы хотите поддержать.
Const RE_VALIDATE_URL = /^[-:.+()[\]$"*;@~!,?%=\/\w]+$/;
// Attempt a function
function attempt(func) {
try {
return func();
}
catch (e) {
return e;
}
}
// Navigate to the specified absolute URL
function navigate(webview, url, silent) {
let resp = attempt(() => webview.navigate(url));
// ...
}
// Navigate to the specified location
this.navigateTo = loc => {
// ...
// Check if the input value contains illegal characters
let isUrl = RE_VALIDATE_URL.test(loc);
if (isUrl && navigate(this.webview, loc, true)) {
return;
}
// ... Fallback logic (e.g. prepending http(s) to the URL, querying Bing.com, etc.)
};
// Listen for the Enter key in the address bar to navigate to the specified URL
this.urlInput.addEventListener("keypress", e => {
if (e.keyCode === 13) {
this.navigateTo(urlInput.value);
}
});
Вот пример сценария, который мы попробовали реализовать. Допустим, в адресную строку введено значение “microsoft.com”. Адрес не является полным. Если такое значение передать в метод navigate(), он завершится неудачей. Наш браузер должен знать, что URL не полный, и уметь определить, какой корректный протокол подставить: http или https. Более того, возможно, что введенное значение и не предполагалось адресом. К примеру, мы могли ввести в адресную строку значение “seahawks”, надеясь, что, как и во многих браузерах, строка также работает как поле поиска. Браузер должен понять, что значение не является адресом, и попробовать «найти» его в поисковой системе.
На любом рабочем компьютере установлен браузер. И это понятно, ведь эту программу используют для выхода в сеть Интернет. Но задумывались ли вы, как создаются браузеры, что нужно знать и, вообще, сложно ли это? На сегодняшний день на рынке существует лишь несколько популярных браузеров, которыми часто пользуются. Например: "Яндекс. Браузер", Chrome, Opera, Firefox. Если создавать с нуля, то, конечно, конструирование браузера покажется вам очень долгим и сложным процессом. Но можно использовать уже готовые инструменты, при этом создать новый "Яндекс. Браузер" можно буквально за пару минут! Не верите? В этой статье расскажем о том, как создать свой браузер с помощью программы Construct 2 на основе Chrominium.
Construct 2 - это программа для разработки приложений, в частности игр, под различные платформы. Продукты, созданные в этой программе, можно запускать как на мобильных платформах, так и на Windows. Хочется отметить, что для разработки не требуются знания программирования, все строится на событиях. Благодаря этому абсолютно любой человек сможет научиться создавать игры или программы за пару недель! Но мы будем использовать Construct 2 для быстрой разработки своего браузера. Есть платная и бесплатная версии программы. В бесплатной версии нет возможности создавать софт под мобильные платформы, но для создания браузера он сгодится. Приступаем к рассмотрению вопроса о том, как создать свой браузер!
Для начала нужно скачать и установить Construct 2. Скачать можно на официальном сайте. Конечно, есть сайты, где предлагают взломанные версии, но они могут работать некорректно. Мы же создаем приложение браузер, нам хватит и бесплатной версии. Устанавливаем в удобное нам место и запускаем. Выглядит Construct 2 следующим образом:
Но перед тем, как начать разработку, нужно скачать плагин IFrame. Найти его можно на официальном сайте программы. Устанавливается он достаточно просто. Сначала выходим из Construct 2. Скачиваем плагин, содержимое архива нужно перекинуть в папку Construct2/exporters/html5/plugins. Плагин установлен!
Все готово, можем приступать к созданию браузера. Для этого сначала запускаем Construct 2. В левом верхнем углу нажимаем на кнопку File - New. После чего перед нами появится следующее:
Выбор огромный, различные форматы и прочее. Но все это нужно при создании игр под мобильные платформы. Нам необходимо выбрать самую первую и нажать на Open. Создается проект, но он выглядит безобразно:
Нужно определить размеры. Слева, во вкладке Properties, можно заметить поле Layout size. Там указываются размеры проекта, изначально это 1708x960. Поменяем эти значения на более удобные: 640x480. Дальше в этой же вкладке нажимаем на кнопку View и в поле Windows Size так же меняем значение на 640x480. Привели проект в нормальный вид, осталось только создать свой браузер. Как легко было все настраивать, так же легко будет создавать!
Все подготовлено, можно начинать. Кликаем ПКМ по нашему полю и нажимаем Insert New Object. Видим следующее:
Это список плагинов. Помните, мы устанавливали плагин IFrame, вот его-то в этом списке и нужно найти. Если вы все правильно установили, то он здесь будет. Выглядит он так:
Кликаем по нему 2 раза и растягиваем появившийся объект по всему полю. Вот так:
После чего нам нужно добавить события, чтобы браузер начал работать. Для этого переходим во вкладку Event Sheet. Найти его можно сверху по центру. Переходим туда и нажимаем ПКМ - Add Event - System. В появившемся списке ищем On start of layout, что обозначает "При запуске уровня".
И нажимаем Done. Рядом с событием, которое мы добавили, есть кнопка Add Action. Нажимаем туда и выбираем наш плагин. В появившемся окне ищем Set Url и нажимаем туда, в поле URL вводим ссылку на поисковую систему.. Все должно выглядеть следующим образом:
Нажимаем Done. Все готово! Для теста необходимо запустить наш проект нажатием на F5. Запускается наш браузер, и выглядит он следующим образом:
Не забывайте, что Construct 2 дает возможность скомпилировать свой проект под различные платформы: Android, iOS, Windows, Linux и прочие!
В этой статье мы рассмотрели вопрос о том, как создать свой браузер. Как можно заметить, это сделать достаточно легко, а сам процесс занимает всего несколько минут. Конечно, это браузер не с нуля, а на основе готового, но все же это начало!
За последние несколько месяцев мы внесли множество улучшений в (EdgeHTML), делая особый акцент на совместимости с современными браузерами и соответствии новым и грядущим стандартам. Помимо того, что EdgeHTML лежит в основе браузера Microsoft Edge, он также доступен для приложений на Universal Windows Platform (UWP) через элемент управления WebView . Сегодня мы хотим рассказать, как можно использовать WebView для создания своего браузера в Windows 10.
Используя стандартные веб-технологии, включая JavaScript, HTML и CSS, мы создали простое UWP-приложение, которое содержит внутри WebView и реализует базовую функциональность: навигацию и работу с избранным. Подобные приемы могут быть использованы в любом UWP-приложении для прозрачной интеграции веб-контента.
В основе нашего примера лежит мощный элемент управления WebView. Помимо комплексного набора API, данный элемент также позволяет преодолеть некоторые ограничения , присущие iframe, например, отслеживание фреймов (когда некоторый сайт меняет свое поведение в случае выполнения внутри iframe) и сложность определения загрузки документа. В дополнение x-ms-webview , - так WebView задается в HTML, - дает доступ к функциональности, не доступной в iframe, в частности, улучшенный доступ к локальному контенту и возможности делать снимки содержимого. Когда вы используете элемент управления WebView, вы получаете тот же самый движок, что и в Microsoft Edge.
Помимо JavaScript, мы также использовали немного HTML и CSS, а также некоторое количество строк кода на C++ для поддержки комбинаций клавиш, но это не требуется в простом случае.
Также мы пользуемся новыми возможностями нового ECMAScript 2015 (ES2015), поддерживаемыми в Chakra, JavaScript-движке, работающем в Microsoft Edge и элементе управления WebView. ES2015 позволил нам сократить количество генерируемого и шаблонного кода, тем самым существенно упростив реализацию идеи. Мы использовали следующие возможности ES2015 при создании приложения: Array.from() , Array.prototype.find() , arrow functions , method properties , const , for-of , let , Map , Object.assign() , Promises , property shorthands , Proxies , spread operator , String.prototype.includes() , String.prototype.startsWith() , Symbols , template strings и Unicode code point escapes .
После перехода на некоторую страницу, мы также обновляем текущее состояние кнопок, чтобы предотвратить «возможность» навигации, когда мы достигаем одного из концов стека навигации. Другими словами, мы отключаем кнопки навигации вперед или назад, проверяя свойства canGoBack или canGoForward на равенство false .
// Update the navigation state this.updateNavState = () => { this.backButton.disabled = !this.webview.canGoBack; this.forwardButton.disabled = !this.webview.canGoForward; }; // Listen for the back button to navigate backwards this.backButton.addEventListener("click", () => this.webview.goBack()); // Listen for the forward button to navigate forwards this.forwardButton.addEventListener("click", () => this.webview.goForward());
// Listen for the stop/refresh button to stop navigation/refresh the page this.stopButton.addEventListener("click", () => { if (this.loading) { this.webview.stop(); this.showProgressRing(false); this.showRefresh(); } else { this.webview.refresh(); } });
Однако современные браузеры пошли сильно дальше и внедряют дополнительную функциональность для удобства пользователей. Это добавляет некоторую сложность в реализации – и тут все зависит от сценариев, которые вы хотите поддержать.
Const RE_VALIDATE_URL = /^[-:.+()[\]$"*;@~!,?%=\/\w]+$/;
// Attempt a function
function attempt(func) {
try {
return func();
}
catch (e) {
return e;
}
}
// Navigate to the specified absolute URL
function navigate(webview, url, silent) {
let resp = attempt(() => webview.navigate(url));
// ...
}
// Navigate to the specified location
this.navigateTo = loc => {
// ...
// Check if the input value contains illegal characters
let isUrl = RE_VALIDATE_URL.test(loc);
if (isUrl && navigate(this.webview, loc, true)) {
return;
}
// ... Fallback logic (e.g. prepending http(s) to the URL, querying Bing.com, etc.)
};
// Listen for the Enter key in the address bar to navigate to the specified URL
this.urlInput.addEventListener("keypress", e => {
if (e.keyCode === 13) {
this.navigateTo(urlInput.value);
}
});
Вот пример сценария, который мы попробовали реализовать. Допустим, в адресную строку введено значение “microsoft.com”. Адрес не является полным. Если такое значение передать в метод navigate(), он завершится неудачей. Наш браузер должен знать, что URL не полный, и уметь определить, какой корректный протокол подставить: http или https. Более того, возможно, что введенное значение и не предполагалось адресом. К примеру, мы могли ввести в адресную строку значение “seahawks”, надеясь, что, как и во многих браузерах, строка также работает как поле поиска. Браузер должен понять, что значение не является адресом, и попробовать «найти» его в поисковой системе.