PhoneGap如何在浏览器中打开链接

Question

<a target="_blank" data-rel="external" href="http://www.kidzout.com">www.kidzout.com</a>

嘿，专家们，我正在使用phonegap 2.9.0，我正在使用上面的代码在浏览器中打开链接，但它在同一个应用程序中打开了它......如何在Safari浏览器中打开？

它在同一个应用程序中打开网站，然后我无法返回应用程序，因此我需要删除该应用程序并重新安装.....

- ahsan ali

---

如果你想在外部浏览器中打开 _blank，并在 WebView 中打开 _self，请查看我针对 Cordova 5.1.1 的 2015 年解决方案：https://dev59.com/71wY5IYBdhLWcg3wyqWH#32227524 - Sebastien Lorber

请参考类似问题的答案：https://dev59.com/a2Ij5IYBdhLWcg3wq21z#26176013 和 https://dev59.com/a2Ij5IYBdhLWcg3wq21z#46619378。 - Peter T.

Answer 1

如类似问题中建议的那样，根据InAppBrowser文档，使用JavaScript调用window.open，并将target参数设置为_system：

<a href="#" onclick="window.open('http://www.kidzout.com', '_system'); return false;">www.kidzout.com</a>

这应该可以使用，但更好、更灵活的解决方案是拦截所有链接的 click 事件，并使用从链接属性中读取的参数调用 window.open。

请记住，您必须安装 InAppBrowser 插件才能使其正常工作：

cordova plugin add cordova-plugin-inappbrowser

- freejosh

---

是的，我也在 Cordova 1.7.0 中使用了相同的 target="_blank"，但现在我正在使用2.9.0，它让我很烦恼，您的建议也没有起作用......:( 提示：该段文字可能与编程有关。 "target="_blank"" 是 HTML 链接中的属性，控制链接是否在新标签页中打开。 - ahsan ali

我尝试了你分享的链接，谢谢你的帮助，但问题仍然存在，网站仍然在应用程序中打开......:( - ahsan ali

嗨，阿赛安，你介意详细说明一下你的问题吗？我觉得我可能遇到了同样的问题。 - whossname

请记得安装InAppBrowser插件才能使其正常工作，具体指南请查看此处：http://cordova.apache.org/docs/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser - jackocnr

我有同样的问题...解决方法不起作用 :( 在安卓上它只是像一个普通的链接打开。 - Daniel

Answer 2

如其他帖子所回答的那样，你在不同平台上有两种不同的选项。我所做的是：

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {

    // Mock device.platform property if not available
    if (!window.device) {
        window.device = { platform: 'Browser' };
    }

    handleExternalURLs();
}

function handleExternalURLs() {
    // Handle click events for all external URLs
    if (device.platform.toUpperCase() === 'ANDROID') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            navigator.app.loadUrl(url, { openExternal: true });
            e.preventDefault();
        });
    }
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
            e.preventDefault();
        });
    }
    else {
        // Leave standard behaviour
    }
}

所以你可以看到，我正在检查设备平台，并根据检查结果使用不同的方法。如果是标准浏览器，则保留标准行为。从现在开始，该解决方案将在Android、iOS和浏览器上正常工作，同时HTML页面不会改变，因此可以使用标准锚点来表示URL。

<a href="http://stackoverflow.com">

该解决方案需要使用InAppBrowser和Device插件

- krzychu

---

非常好的答案。以防其他人遇到问题，请确保您的www/cordova_plugins.js文件包含设备和inappbrowser配置。当我安装插件时，它会将js和插件配置添加到暂存文件夹而不是我的主要工作www文件夹中。一旦我解决了配置和位置问题，这个方法就完美地运行了。 - Michael Bordash

这是最佳答案！请记得通过以下方式安装InAppBrowser插件：$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4 - tixastronauta

如果有人想贡献代码片段，我已将其上传到gist。https://gist.github.com/redolent/e79722b32a48a536b5ba - redolent

Answer 3

<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>

在我的Android和PG 3.0上运行良好

- user2758937

---

在我的设备上，无论是 Android 2.3.7 还是 4.2.2，似乎仍然无法正常运行。 - user569825

在我的 Android 4.4.2 上，使用 Cordova 3.3.0 是可以工作的。但是在 iOS 6.1 上无法工作。 - mytharcher

对我来说，cordova 3.3.0可行，谢谢。你从哪里得到这个信息？在文档中找不到。 - Teoman shipahi

这对我在cordova 3.4.1和android 4.2上有效。我不需要插件。在iOS7上测试后，我会回报告的。 - pgsandstrom

工作得非常好，感谢分享！ - Siberia

Answer 4

在Android和iPhone中打开URL有两种不同的方法。

对于iOS，使用以下代码。

window.open("http://google.com", '_system');

对于 Android 操作系统，请使用以下代码。

navigator.app.loadUrl("http://google.com", {openExternal : true});

- Hassan Siddique

---

Cordova同样可以使用window.open("http://google.com", '_system')。不应该使用navigator.app.loadUrl，因为它无法处理market://类型的URL：在这种情况下，它只会关闭你的应用程序并在同一窗口中打开..这并不总是理想的选择。 - Agamemnus

Agamemnus，window.open在我的PhoneGap 3.6应用程序中无法在Android上工作。我需要使用这个答案中的解决方案来使它工作。 - Moulde

Answer 5

这些答案都不够明确，无法让外部链接在每个平台上打开。根据inAppBrowser文档：

安装

cordova plugin add cordova-plugin-inappbrowser

覆盖 window.open（可选，但建议为简单起见）

window.open = cordova.InAppBrowser.open;

如果您没有覆盖window.open，则将使用原生的window.open函数，并且无法期望在不同平台上获得相同的结果。

使用它在默认浏览器中打开链接

window.open(your_href_value, '_system');

请注意，inAppBrowser的目标（正如插件名称所建议的那样）应为'_blank'，而不是'_system'。

---

如果没有上述步骤，我就无法在跨平台中打开链接到默认浏览器应用程序中。

额外加分

这里是一个链接的示例(实时)点击句柄：

document.addEventListener('click', function (e) {
    if (e.target.tagName === 'A' &&
        e.target.href.match(/^https?:\/\//)) {
        e.preventDefault();
        window.open(e.target.href, '_system');
    }
});

- bozdoz

---

你要在哪里覆盖window.open方法？是在网站上还是Cordova应用程序中？ - Ellisan

最好将您加载到index.html页面（如果有帮助的话，就是您的网站）的JavaScript文件的顶部。 - bozdoz

Answer 6

最后这篇文章帮助我在iOS上解决了问题：http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/。

引用块：

打开“CDVwebviewDelegate.m”文件并搜索“shouldStartLoadWithRequest”，然后将此代码添加到函数的开头：

if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound) {
    [[UIApplication sharedApplication] openURL:[request URL]];
    return NO;
}

在Android中使用navigator.app.loadUrl("http://google.com", {openExternal : true});是可以的。
通过Cordova 3.3.0。

- mytharcher

---

这是我在3.0.0版本中唯一有效的方法。谢谢！ - Rocklan

在3.0版本中，您需要包含InAppBrowser插件。无论看起来多么奇怪。 - Sean Bannister

我会在MainViewController.m文件的上一层进行更改： - (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType { NSURL *url = [request URL]; if ([[url scheme] isEqualToString:@"file"] || [[url scheme] isEqualToString:@"gap"]) { return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; } else { [[UIApplication sharedApplication] openURL:url]; return NO; } } - Gamadril

Answer 7

如果您正在使用jQuery，您可以像这样拦截链接的点击事件：

如果您有jQuery，您可以像这样拦截链接的点击：

$(document).on('click', 'a', function (event) {
    event.preventDefault();
    window.open($(this).attr('href'), '_system');
    return false;
});

这样您就不需要修改HTML中的链接，可以节省很多时间。我使用委托设置了这个功能，所以您可以看到它与文档对象相关联，第二个参数是'a'标签。这样所有的'a'标签都会被处理，无论何时它们被添加。

当然，您仍然需要安装InAppBrowser插件:

cordova plugin add org.apache.cordova.inappbrowser

- Michel Reij

---

这是一个不错的想法，我会使用它，但你也应该注意直接的window.open调用（并非所有内容都通过链接传递）。 - Sebastien Lorber

Answer 8

window.open('http://www.kidzout.com', '_system');

如果您安装了inappbrowser插件，此方法将有效。要安装插件，请使用终端浏览到项目中的www文件夹并键入：

phonegap plugin add org.apache.cordova.inappbrowser

或者

cordova plugin add org.apache.cordova.inappbrowser

然后你的链接将在浏览器中打开。

- Dev01

---

命令 phonegap local <command> 已被弃用。 该命令已委派给 phonegap <command>。 命令 phonegap local <command> 将很快被移除。 - Ajay Suwalka

以前我不知道，但现在正确安装此插件的方法是 cordova plugin add cordova-plugin-inappbrowser。 - Plinio FM

Answer 9

从 Cordova 5.0 开始，插件 InAppBrowser 在 Cordova 插件注册表中更名了，因此您应该使用以下命令安装它：

cordova plugin add cordova-plugin-inappbrowser --save

然后使用。

<a href="#" onclick="window.open('http://www.kidzout.com', '_system');">www.kidzout.com</a>

- codevision

Answer 10

我是一名有帮助的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我也遇到了链接在浏览器上无法打开的问题，这是我的解决方法：

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 两种环境。

- Tabish