Html phonegap 在浏览器中打开链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17887348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
phonegap open link in browser
提问by ahsan ali
<a target="_blank" data-rel="external" href="http://www.kidzout.com">www.kidzout.com</a>
hey experts i am using phonegap 2.9.0 and i am using the above code to open the link in the browser but it opens it in the same app...... how to open it safari browser?
嘿专家我正在使用phonegap 2.9.0，我正在使用上面的代码在浏览器中打开链接，但它在同一个应用程序中打开它......如何打开它的Safari浏览器？
it opens the website in the same app and then i am unable to come back to the app, so i need to delete the app and install that again.....
它在同一个应用程序中打开网站，然后我无法返回该应用程序，因此我需要删除该应用程序并重新安装.....
回答by freejosh
As suggested in a similar question, use JavaScript to call window.openwith the targetargument set to _system, as per the InAppBrowser documentation:
正如在类似问题中所建议的，根据InAppBrowser 文档，使用 JavaScript 调用window.open并将target参数设置为：_system
<a href="#" onclick="window.open('http://www.kidzout.com', '_system'); return false;">www.kidzout.com</a>
This should work, though a better and more flexible solution would be to intercept all links' clickevents, and call window.openwith arguments read from the link's attributes.
这应该可行，但更好、更灵活的解决方案是拦截所有链接的click事件，并window.open使用从链接属性读取的参数进行调用。
Remember you must install the InAppBrowser plugin for this to work:
请记住，您必须安装 InAppBrowser 插件才能使其工作：
cordova plugin add cordova-plugin-inappbrowser
回答by krzychu
As answered in other posts, you have two different options for different platforms. What I do is:
正如在其他帖子中所回答的，对于不同的平台，您有两种不同的选择。我要做的是：
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
}
}
So as you can see I am checking the device platform and depending on that I am using a different method. In case of a standard browser, I leave standard behaviour. From now on the solution will work fine on Android, iOS and in a browser, while HTML page won't be changed, so that it can have URLs represented as standard anchor
如您所见，我正在检查设备平台，并根据该平台使用不同的方法。在标准浏览器的情况下，我保留标准行为。从现在开始，该解决方案将在 Android、iOS 和浏览器上正常工作，而 HTML 页面不会更改，因此它可以将 URL 表示为标准锚点
<a href="http://stackoverflow.com">
The solution requires InAppBrowser and Device plugins
该解决方案需要 InAppBrowser 和 Device 插件
回答by user2758937
<a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link</a>
Works for me with android & PG 3.0
适用于我的 android 和 PG 3.0
回答by Hassan Siddique
There are 2 different ways to open URL in android and iphone.
在 android 和 iphone 中有两种不同的打开 URL 的方法。
FOR IOS use following code.
FOR IOS 使用以下代码。
window.open("http://google.com", '_system');
and for android OS use following code.
对于 android 操作系统，请使用以下代码。
navigator.app.loadUrl("http://google.com", {openExternal : true});
回答by mytharcher
At last this post helps me on iOS: http://www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/.
最后这篇文章在 iOS 上帮助了我：http: //www.excellentwebworld.com/phonegap-open-a-link-in-safari-or-external-browser/。
Open "CDVwebviewDelegate.m" file and search "shouldStartLoadWithRequest", then add this code to the beginning of the function:
if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound) { [[UIApplication sharedApplication] openURL:[request URL]]; return NO; }
打开“CDVwebviewDelegate.m”文件并搜索“shouldStartLoadWithRequest”，然后将这段代码添加到函数的开头：
if([[NSString stringWithFormat:@"%@",request.URL] rangeOfString:@"file"].location== NSNotFound) { [[UIApplication sharedApplication] openURL:[request URL]]; return NO; }
While using navigator.app.loadUrl("http://google.com", {openExternal : true});for Android is OK.
虽然navigator.app.loadUrl("http://google.com", {openExternal : true});用于 Android 是可以的。
Via Cordova 3.3.0.
通过科尔多瓦 3.3.0。
回答by bozdoz
None of these answers are explicit enough to get external links to open in each platform. As per the inAppBrowser docs:
这些答案都不够明确，无法在每个平台上打开外部链接。根据inAppBrowser 文档：
Install
安装
cordova plugin add cordova-plugin-inappbrowser
Overwrite window.open (optional, but recommended for simplicity)
覆盖 window.open （可选，但为了简单起见推荐）
window.open = cordova.InAppBrowser.open;
If you don't overwrite window.open, you will be using the native window.openfunction, and can't expect to get the same results cross-platform.
如果您不覆盖window.open，您将使用本机window.open功能，并且不能期望跨平台获得相同的结果。
Use it to open links in default browser
使用它在默认浏览器中打开链接
window.open(your_href_value, '_system');
Note that the target for the inAppBrowser (which is what the plugin name suggests it is to be used for) is '_blank', instead of '_system'.
请注意，inAppBrowser 的目标（插件名称暗示它的用途）是'_blank'，而不是'_system'。
Without the steps above, I was not able to get links to open in the default browser app cross-platform.
如果没有上述步骤，我无法在跨平台的默认浏览器应用程序中获取链接。
Extra credit
额外学分
Here's an example (live) click handler for the links:
这是链接的示例（实时）单击处理程序：
document.addEventListener('click', function (e) {
if (e.target.tagName === 'A' &&
e.target.href.match(/^https?:\/\//)) {
e.preventDefault();
window.open(e.target.href, '_system');
}
});
回答by Michel Reij
If you happen to have jQuery around, you can intercept the click on the link like this:
如果你身边有 jQuery，你可以像这样拦截点击链接：
$(document).on('click', 'a', function (event) {
event.preventDefault();
window.open($(this).attr('href'), '_system');
return false;
});
This way you don't have to modify the links in the html, which can save a lot of time. I have set this up using a delegate, that's why you see it being tied to the document object, with the 'a' tag as the second argument. This way all 'a' tags will be handled, regardless of when they are added.
这样就不用修改html中的链接，可以节省很多时间。我已经使用委托进行了设置，这就是为什么您会看到它与文档对象相关联，并将“a”标记作为第二个参数。这样，所有“a”标签都将被处理，无论何时添加。
Ofcourse you still have to install the InAppBrowser plug-in:
当然你还是要安装InAppBrowser插件：
cordova plugin add org.apache.cordova.inappbrowser
回答by Dev01
window.open('http://www.kidzout.com', '_system');
Will work but only if you have the inappbrowser plugin installed. To install, using terminal, browse to the www folder in your project and type:
可以工作，但前提是您安装了 inappbrowser 插件。要安装，请使用终端，浏览到项目中的 www 文件夹并键入：
phonegap plugin add org.apache.cordova.inappbrowser
or
或者
cordova plugin add org.apache.cordova.inappbrowser
Then it your link will open in the browser.
然后您的链接将在浏览器中打开。
回答by codevision
With Cordova 5.0 and greater the plugin InAppBrowser is renamed in the Cordova plugin registry, so you should install it using
对于 Cordova 5.0 及更高版本，插件 InAppBrowser 在 Cordova 插件注册表中重命名，因此您应该使用
cordova plugin add cordova-plugin-inappbrowser --save
Then use
然后使用
<a href="#" onclick="window.open('http://www.kidzout.com', '_system');">www.kidzout.com</a>回答by Tabish
I also faced the issue that link was not opening on browser here is my fix with steps:
我还遇到了链接未在浏览器上打开的问题，这是我的修复步骤：
1: Install this cordova plugin.
1：安装这个cordova插件。
cordova plugin add cordova-plugin-inappbrowser
2: add the open link in the html like following.
2：在html中添加打开链接，如下所示。
<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>
3: this is the most importaint step due to this I faced lots of issue:
download the cordova.jsfile and paste it in the wwwfolder.
Then make a reference of this in the index.htmlfile.
3：这是最重要的步骤，因为我遇到了很多问题：下载cordova.js文件并将其粘贴到www文件夹中。然后在index.html文件中引用this 。
<script src="cordova.js"></script>
This solution will work for both the environment android and iPhone.
此解决方案适用于 android 和 iPhone 环境。
