PhoneGap: открыть внешнюю ссылку в браузере по умолчанию (вне приложения)

Я пытаюсь открыть ссылки в Safari (на iPhone) из приложения PhoneGap. Я использую PhoneGap версии 3.1.0 и использую PhoneGap Build для создания приложения.

У меня есть две ссылки на странице (показано ниже в www/index.html). Обе ссылки открываются внутри приложения PhoneGap. Я вижу, что PhoneGap загружен правильно, потому что срабатывает alert ( "устройство готово!" );.

Что мне нужно изменить, чтобы открыть ссылки в браузере по умолчанию (вне приложения)?

Файл www/config.xml выглядит следующим образом:

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.company.appname" version="0.0.3">
  <name>AppName</name>
  <description>description</description>
  <author href="#" onclick="location.href='http://www.example.com/'; return false;" email="[email protected]">
    Company
  </author>
  <preference name="phonegap-version" value="3.1.0" />
  <preference name="orientation" value="portrait" />
  <preference name="stay-in-webview" value="false" />

  <gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.3" />
  <gap:plugin name="org.apache.cordova.dialogs" version="0.2.2" />
  <gap:plugin name="com.phonegap.plugins.pushplugin" version="2.0.5" />

  <plugins>
    <plugin name="InAppBrowser" value="CDVInAppBrowser" />
  </plugins>

  <feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
  </feature>
  <access origin="*" />
</widget>

Файл www/index.html выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <title>Test application</title>
</head>
<body>
  <a href="#" onclick="openUrl('http://www.google.com/'); return false;">Link test 1</a>
  <a href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">Test link 2</a>

  <script src="phonegap.js"></script>
  <script src="cordova.js"></script>
  <script src="js/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    function openUrl(url) {
      alert("open url: " + url);
      window.open(url, '_blank', 'location=yes');
    }

    function onDeviceReady() {
      alert('device ready!');
    }
    $(function() {
        document.addEventListener("deviceready", onDeviceReady, true);
    });
  </script>
</body>
</html>

Здесь структура проекта:

├── platforms
├── plugins
│   └── org.apache.cordova.inappbrowser
│       ├── LICENSE
│       ├── package.json
│       ├── plugin.xml
│       ├── README.md
│       ├── RELEASENOTES.md
│       ├── src
│       │   ├── android
│       │   │   ├── InAppBrowser.java
│       │   │   └── InAppChromeClient.java
│       │   ├── blackberry10
│       │   │   └── README.md
│       │   ├── ios
│       │   │   ├── CDVInAppBrowser.h
│       │   │   └── CDVInAppBrowser.m
│       │   └── wp
│       │       └── InAppBrowser.cs
│       └── www
│           ├── InAppBrowser.js
│           └── windows8
│               └── InAppBrowserProxy.js
├── README.md
└── www
    ├── config.xml
    ├── cordova.js
    ├── index.html
    ├── js
    │   └── jquery-1.9.1.js
    └── phonegap.js

Ответы

Ответ 1

Вот как я решил в Кордове /Phonegap 3.6.3

Установите плагин inappbroswer cordova:

cordova plugin add org.apache.cordova.inappbrowser

Я хотел, чтобы приложение phonegap как можно более похоже на стандартную веб-страницу: я хотел, чтобы с помощью target = "_ blank" в ссылке он открывался на внешней странице.

Вот как я его реализовал:

$("a[target='_blank']").click(function(e){
  e.preventDefault();
  window.open($(e.currentTarget).attr('href'), '_system', '');
});

так что все, что мне нужно сделать, это использовать ссылку, такую как

<a href="http://www.example.com" target="_blank">Link</a>

Ответ 2

Как насчет этого?

<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>

EDIT:

Это может иметь значение: Как вызвать несколько функций JavaScript в событии onclick?

Я думал, как насчет этого:

Добавить в код:

$(".navLink").on('tap', function (e) {
    //Prevents Default Behavior 
    e.preventDefault();
    // Calls Your Function with the URL from the custom data attribute 
    openUrl($(this).data('url'), '_system');
});

то

<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>

Ответ 3

Вы должны использовать пробел: тег плагина и полный идентификатор в файле config.xml для установки плагинов:

<gap:plugin name="org.apache.cordova.inappbrowser" />

Как описано здесь.

Ответ 4

Я использую cordova 6.0, вот мое решение:

1: установите этот плагин cordova.

cordova plugin add cordova-plugin-inappbrowser

2: добавьте открытую ссылку в html, как показано ниже.

<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>

3: это самый важный шаг из-за этого, я столкнулся с большой проблемой: загрузите файл cordova.js и вставьте его в папку www. Затем сделайте ссылку на это в файле index.html.

<script src="cordova.js"></script>

Это решение будет работать как для Android, так и для iPhone.

Ответ 5

попробуйте этот пример ниже.

<a class="appopen" onClick="OpenLink();">Sign in</a>


<script>
function OpenLink(){
    window.open("http://www.google.com/", "_system");
}
</script>

добавьте эту строку ниже в файле config.xml, если вы используете PhoneGap версии 3.1 или выше

<gap:plugin name="org.apache.cordova.inappbrowser" />

Ответ 6

У меня была та же проблема, что вы и решение включили файл phonegap.js в <head> на всех страницах, где я буду использовать InAppBrowser.

Весь ваш код в порядке! Единственное, что вам нужно добавить: <script src="phonegap.js"></script> в разделе <head> на index.html

Это немного странно, потому что Phonegap в разделе документации плагина говорит:

"Если плагин использует элемент js-module, чтобы направить кордову на загрузку плагины javascripts, тогда нет ссылок <script>. для загрузки плагина. Это относится к основным плагинам cordova"

И InAppBrowser - это основной плагин cordova. Но по какой-то странной причине не работают, пока вы не включите в нее файл phonegap.js (по крайней мере, в версии 0.3.3).

ПРИМЕЧАНИЕ. Я обнаружил ошибку. Некоторые люди говорят, что вы должны включить 3 файла: phonegap.js, cordova.js и cordova_plugins.js. Но когда я включаю эти 3 файла, мое приложение отлично работает в iOS 7, но в iOS 6 игнорируют использование плагина (с использованием: Cordova 3.3.0 + Phonegap Build + InAppBrowser 0.3.3).

Вы можете увидеть больше в моем вопросе SO.

Надеюсь, это поможет вам!

Ответ 7

Для iOs в вашем MainViewController.m выполните следующие действия

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if (![url isFileURL] && navigationType == UIWebViewNavigationTypeLinkClicked)
    {
        if ([[UIApplication sharedApplication] canOpenURL:url]) {
        [[UIApplication sharedApplication] openURL:url];
            return NO;
        }
    } 

    return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; 
}

EDIT: Для Android, в CordovaWebViewClient.java, в shouldOverrideUrlLoading выполните следующие действия:

public boolean shouldOverrideUrlLoading(WebView view, String url) {
          if(/*check if not external link*) {
            view.loadUrl(url);
          } else {
            //prepend http:// or https:// if needed
            Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(i);
          }
          return true;
        }

Ответ 8

Это отлично работало для меня на iOS.

Как упоминалось в ссылке выше:

1- Установите плагин с помощью команды:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

2- И в файле HTML при необходимости используйте одно из следующих значений:

window.open(‘http://example.com’, ‘_system’);   Loads in the system browser 
window.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view

Ответ 9

Поздний ответ, но, возможно, это будет полезно для кого-то. Итак, что я имею в своем рабочем коде в приложениях для iOS и Android на базе Cordova. Чтобы открыть внешнюю ссылку в браузере по умолчанию (Safari или Google):

1) Убедитесь, что у вас есть плагин inAppBrowser

cordova plugin add cordova-plugin-inappbrowser --save

2) Добавить в device.js

function openURL(urlString){
  let url = encodeURI(urlString);
  window.open(url, '_system', 'location=yes');
}

3) Создать новую ссылку

<a href="#" onClick="openURL('http://www.google.com')">Go to Google</a>

Ответ 10

Вот как я получил свою работу.

В config.xml(phonegap) добавьте <gap:plugin name="org.apache.cordova.inappbrowser" />
Мои hrefs выглядят следующим образом: <a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
Очень важно, чего мне не хватало с самого начала, добавить кордову script в ваш заголовок: <script src="cordova.js"></script> Я не знаю почему, но для меня без нее это не работает.

Надеюсь, что это поможет

Ответ 11

Возможно, у него есть проблема с переменной среды PATH, попробуйте эту ссылку, это может помочь.

Документация Apache Cordova

Телефонная связь/Кордова - Как ссылаться на внешние страницы

Ответ 12

edit config.xml Добавить источник = "npm" в записи плагина. '<' gap: plugin name= "org.apache.cordova.inappbrowser" source = "npm" > '

Ответ 13

Я адаптировал pastullo answer для работы также в WebApp, который может быть открыт в кордове InAppBrowser, но также и в обычном веб-приложении (например, для тестирования):

function initOpenURLExternally() {
    $("a[target='_blank'],a[target='_system']").each(function (i) {
        var $this = $(this);
        var href = $this.attr('href');
        if (href !== "#") {
            $this
                .attr("onclick", "openURLExternally(\"" + href + "\"); return false;")
                .attr("href", "#");
        }
    });
}

function openURLExternally(url) {
    // if cordova is bundeled with the app (remote injection plugin)
    log.trace("openURLExternally: ", url);
    if (typeof cordova === "object") {
        log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
        if (typeof cordova.InAppBrowser === "object") {
            log.trace("InAppBrowser exists");
            cordova.InAppBrowser.open(url, "_system");
            return;
        }
    }

    // fallback if no cordova is around us:
    //window.open(url, '_system', '');
    window.open(url, '_blank', '');
}

Ответ 14

Вместо target="_blank", используйте target="_system" для ссылок, которые вы хотите открыть во внешнем браузере (вне приложения). Затем при нажатии на эти ссылки ваше устройство переключится с вашего приложения на приложение системного браузера (например, Safari или Chrome), чтобы открыть ссылку.

Ответ 15

Для тех, кто не заметил это в исходном вопросе, вам также необходимо убедиться, что URL-адрес, который вы пытаетесь открыть, не включен в белый список, добавив тег доступа к вашему config.xml как следующим образом:

<access origin="http://www.example.com" />

или вы можете сделать

<access origin="*" />

чтобы разрешить что-либо

Ответ 16

Если вы пытаетесь открыть ссылку во внешнем веб-браузере, попробуйте использовать class= "внешний" для тега Anchor.

<a class="external" href="www.google.com" >Link</a>

Надеюсь, это поможет!