Открытие внешних ссылок в браузере через PhoneGap 2.9.0

Быстрый ответ

Вы можете открывать ссылки во внешнем браузере из приложения PhoneGap, используя функцию window.open() c параметром _system:

window.open('https://www.example.com', '_system');

Такой подход гарантирует высокий уровень удобства для пользователя, позволяя ему просматривать веб-страницы в привычной браузерной среде.

Установка плагина

Если при открытии ссылок в вашем приложении PhoneGap происходят какие-то нестандартные события, стоит проверить, установлен ли у вас плагин InAppBrowser. Он обеспечивает гладкое взаимодействие:

cordova plugin add cordova-plugin-inappbrowser

Визуализация

Открывание ссылки во внешнем браузере можно представить как дорогу из приложения PhoneGap через мост в бесконечный океан интернета:

📱 Приложение (PhoneGap)      🌊 Браузер (Море Интернет)
        |
    ⛵️ Плывем
        ↓
🌉 🚤 🌊

Переходим грань между приложением и браузером!

📱 В PhoneGap: `Так уютно, что не хочется уходить`
🚤 При клике на ссылку: `Плывем по мосту в океан интернета`

Управление внешними ссылками в приложении

Создание универсального поведения ссылок для различных платформ

В случае, когда в приложении есть как внутренние, так и внешние ссылки, стандартная функция window.open() может работать непредсказуемо. Необходимо настроить её поведение при помощи обработчика событий:

document.addEventListener("deviceready", function() {
    window.open = cordova.InAppBrowser.open;
}, false);

Подробнее об этом расскажет наш спикер на видео

Специфика обработки ссылок на Android

На Android платформе детали важны, и window.open() с параметром _system не всегда работает, как ожидается. Здесь следует использовать navigator.app.loadUrl:

function openExternalLink(url) {
    navigator.app.loadUrl(url, { openExternal: true });
}

В обработчике клика по ссылке:

<a href="#" onclick="openExternalLink('https://www.example.com');">Перейти на Example.com</a>

Управление поведением ссылок

Вы можете контролировать поведение ссылок, используя слушателя событий клика:

function handleExternalLinks() {
    document.querySelectorAll('a[href]').forEach(function(linkElement) {
        linkElement.addEventListener('click', function(event) {
            event.preventDefault(); // Останавливаем стандартное действие
            var href = this.getAttribute('href');
            window.open(href, '_system');
        });
    });
}

document.addEventListener("deviceready", handleExternalLinks, false);

Поддержка веб-согласованности

Если нет веских оснований поступать иначе, старайтесь сохранять стандартное поведение веб-ссылок. Это упрощает работу для пользователей:

<!-- Пример идеальной ссылки -->
<a href="https://www.example.com">Посетить Example.com</a>

Полезные материалы

1. InAppBrowser – Apache Cordova – подробная документация по работе с плагином InAppBrowser.
2. GitHub – apache/cordova-plugin-inappbrowser – официальный репозиторий плагина с полезными примерами кода.
3. Embedding WebViews – Apache Cordova – руководство по встроенным WebView и работе со ссылками на внешние страницы.
4. cordova-plugin-inappbrowser – npm – npm-пакет плагина, раскрывающий дополнительные возможности вашего приложения.
5. Why is WKWebView not opening links with target="_blank"? – Stack Overflow – обсуждение особенностей работы WKWebView на платформе Stack Overflow.