PhoneGap：在默认浏览器中打开外部链接（在应用程序之外）答案

【问题标题】：PhoneGap: Open external link in default browser (outside the app)PhoneGap：在默认浏览器中打开外部链接（在应用程序之外）
【发布时间】：2013-11-29 11:25:48
【问题描述】：

我正在尝试从 PhoneGap 应用程序打开 Safari（在 iPhone 上）中的链接。我正在使用 PhoneGap 3.1.0 版，并使用PhoneGap Build 来构建应用程序。

我在页面上有两个链接（如下 www/index.html 所示）。这两个链接都在 PhoneGap 应用程序中打开。我可以看到 PhoneGap 加载正确，因为触发了 alert('device ready!');。

我需要更改哪些内容才能在默认浏览器（应用程序外部）中打开链接？

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="http://www.example.com/" email="hello@example.com">
    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

【问题讨论】：

这里有什么问题....???
@mvp 我猜链接不会在 Safari 中打开。
在这里，在你的代码中你尝试在Appbrowser中它会在应用程序本身的另一个窗口中打开..你想在浏览器中打开吗..？
是的，我想在默认浏览器中打开外部链接。不在应用程序内部。
你有解决办法吗？？？

标签： cordova phonegap-plugins phonegap-build inappbrowser

【解决方案1】：

这就是我在 Cordova/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>

【讨论】：

这个解决方案有效但是如果我想使用另一个插件人行横道crosswalk-project.org而不是使用默认的webview人行横道使用chrome引擎作为默认的webview所以如果我使用inappbrowser插件没有人行横道的意义插件我该怎么办？

【解决方案2】：

这个怎么样？

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

编辑：

这可能与： How to call multiple JavaScript functions in onclick event?

我在想，这个怎么样：

添加到代码：

$(".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>

【讨论】：

该链接在我的 iPhone 上没有任何作用 - 因为 onclick 不会返回 false 以阻止它跟随 href="#"。当我添加 return false 时（像这样：google.com/'), '_system'); return false;">测试链接 2）， Google 在应用程序内部打开：i.imgur.com/xKj1XZB.png
更改为防止默认行为
您可能已经注意到，我在原始评论中发布的 javascript 中有一个 openUrl 方法。我可以看到你用两个参数调用 openUrl，所以我假设你正在调用另一个方法，并注释掉了我自己的 openUrl 方法（它只接受一个参数）。当我测试它时，什么也没有发生。
您的 openURL 函数只需要 1 个参数。函数 openUrl(url) { alert("打开 url:" + url); window.open(url, '_system'); }
您应该将其更改为 '_system' 并删除位置参数。

【解决方案3】：

您应该在 config.xml 中使用 gap:plugin 标签和完全限定的 id 来安装插件：

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

如文档所述here。

【讨论】：

我有这一行：，我可以看到它已添加到插件选项卡中PhoneGap 构建。 i.imgur.com/e90CzMR.png。我需要删除版本号吗？
AFAICT 这不会在默认浏览器中打开链接。它在 InAppBrowser 中打开。那不是一回事。例如，当我是 Facebook 应用程序并单击一个链接时，它会在 InAppBrowser 中打开该链接。如果然后可以选择“在 Safari 中打开”。这是我正在寻找的第二个功能。不是 InAppBrowser
@gman 您需要将 '_system' 参数传递给 window.open 链接以使用系统浏览器而不是 inappbrowser。见上面 Red2678 的解决方案。

【解决方案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 环境。

【讨论】：

确保添加了 cordova.js 脚本为我解决了这个问题

【解决方案5】：

试试下面这个例子。

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


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

如果您使用的是 PhoneGap 3.1 或更高版本，请在 config.xml 中添加以下行

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

【讨论】：

看这个。此stackoverflow.com/questions/10244965/… 的可能重复项
@NijilNair 我添加了代码：function openlink2() { var ref = window.open(encodeURI("google.com/"), '_system', 'location=no'); } 并添加了一个链接：另一个链接。Google 仍会在应用程序内部打开：i.imgur.com/xKj1XZB.png
$(document).on("click", "#div_id", function() { var yourUrl = 'google.com/'; var ref = window.open(encodeURI(yourUrl), '_system', 'location=no'); });只需尝试使用 div 而不是。你需要有一个，因为你没有传递任何href。
我这样做的时候什么也没发生。在使用 PhoneGap 构建之前，我在浏览器中对其进行了测试（成功），所以我知道这不是 javascript 错误。
@Martin 你遇到问题了吗？？

【解决方案6】：

我遇到了与您相同的问题，解决方案是在我将使用 InAppBrowser 的所有页面中将 phonegap.js 文件添加到 <head>。

您的所有代码都可以！您唯一需要添加的是：<script src="phonegap.js"></script> 在您的 <head> 部分中的 index.html

这有点奇怪，因为 Phonegap 在他的插件文档部分说：

"如果插件使用js-module 元素来引导cordova 加载插件 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 question看到更多。

希望对你有帮助！

【讨论】：

【解决方案7】：

迟到的答案，但也许对某人有帮助。因此，我在基于 Cordova 的 iOS 和 Android 应用程序中的工作代码中拥有什么。在默认浏览器（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>

【讨论】：

【解决方案8】：

对于 iO，在 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]; 
}

编辑：对于 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;
        }

【讨论】：

【解决方案9】：

This 在 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

【讨论】：

【解决方案10】：

我调整了pastullo's answer 也适用于可能在cordova InAppBrowser 中打开的WebApp，但也适用于普通的Web-App（例如用于测试）：

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', '');
}

【讨论】：

【解决方案11】：

这就是我的工作方式。

在 config.xml (phonegap) 添加<gap:plugin name="org.apache.cordova.inappbrowser" />
我的 href 如下所示：<a onclick='window.open("http://link.com","_system", "location=yes")' href='javascript:void(0)' >link</a>
非常重要，我从一开始就缺少什么，在你的标题中添加科尔多瓦脚本：<script src="cordova.js"></script> 我不知道为什么，但是没有它对我来说不起作用。

希望对你有所帮助

【讨论】：

【解决方案12】：

可能是 PATH 环境变量问题，试试这个链接可能会有所帮助。

Apache Cordova Documentation

Phonegap/Cordova – How to link to external pages

【讨论】：

简单解释

【解决方案13】：

edit config.xml 在插件入口处添加 source="npm"。' '

【讨论】：

嗨！如果您冷编辑您的答案以将代码示例放在格式化的代码块中并添加一些解释，那就太好了。

【解决方案14】：

使用target="_system" 代替target="_blank"，作为您希望在外部浏览器（应用程序外部）中打开的链接。然后当点击这些链接时，您的设备将从您的应用切换到系统的浏览器应用（即 Safari 或 Chrome）以打开链接。

【讨论】：

【解决方案15】：

对于那些在原始问题中没有发现它的人，您还需要通过将访问标记添加到您的 config.xml 来确保您尝试打开的 URL 未被列入白名单如下：

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

或者你可以这样做

<access origin="*" />

允许任何事情

【讨论】：

这可以作为解决方案的一部分，但不能完全解决！

【解决方案16】：

如果您尝试在外部网络浏览器中打开链接，请尝试使用 class="external" 作为 Anchor 标签。

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

希望这会有所帮助！

【讨论】：

只是添加一个外部类，并不能解决问题。