浏览器中的phonegap打开链接


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

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

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


如果要打开_blank外部浏览器和_selfWebView,请查看我的2015年Cordova 5.1.1解决方案:stackoverflow.com/a/32227524/82609
Sebastien Lorber

Answers:


225

作为建议类似的问题,使用JavaScript来调用window.opentarget参数设置为_system当按照InAppBrowser文档

<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

3
是的,我在科尔多瓦1.7.0中也使用了相同的target =“ _ blank”,但现在我正在使用2.9.0,这让我很烦,您的压迫也没有用……:(
阿桑·阿里

6
是的,我也尝试过,也遵循了您共享的链接,感谢您的帮助,但问题仍然存在,该网站仍在应用程序中打开……:(
ahsan ali

嘿,阿山,您介意阐述您的问题是什么吗?我想我可能遇到同样的问题。
whossname 2013年

3
请记住,您必须安装InAppBrowser插件才能正常工作,请在此处进行说明:cordova.apache.org/docs/en/3.0.0/…–
jackocnr

7
我有同样的问题..解决方案不起作用:(它像常规链接一样打开(在android上)
Daniel

29

正如在其他帖子中回答的那样,针对不同的平台,您有两种不同的选择。我要做的是:

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和设备插件


极好的答案。以防万一它不适用于其他人,请确保您的www / cordova_plugins.js包含设备和内置的浏览器配置。当我安装插件时,它将js&plugins配置添加到暂存文件夹,而不是我的主要工作www文件夹。一旦我整理出配置和位置,就可以完美地工作了。
Michael Bordash 2014年

1
这是最好的答案!请记住,您没有通过以下方式安装InAppBrowser插件:$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4
tixastronauta,2015年

如果有人想为摘录做贡献,我将其上传到了gist。gist.github.com/redolent/e79722b32a48a536b5ba
redolent

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

适用于Android和PG 3.0


在Android 2.3.7和4.2.2上,对于我来说似乎仍然都失败了。
2013年

2
使用Cordova 3.3.0在Android 4.4.2上为我工作。但不适用于iOS 6.1。
mytharcher 2014年

我的作品Cordova 3.3.0,谢谢,您从哪里获得此信息?在文档中找不到。
2014年

这适用于我的科尔多瓦3.4.1和android 4.2。我不需要插件。我将在iOS7上进行测试后再向您报告。
pgsandstrom,2014年

这是在Android上为我工作的唯一解决方案,谢谢
Niraj Chauhan 2014年

21

有两种方法可以在android和iphone中打开URL。

对于IOS,请使用以下代码。

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

对于Android OS,请使用以下代码。

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

科尔多瓦也可以使用window.open("http://google.com", '_system')。您不应该使用navigator.app.loadUrl,因为它不适用于market://URL:在这种情况下,它只会关闭您的应用程序并在同一窗口中打开。
2014年

1
Agamemnus,window.open在我的phonegap 3.6应用程序中无法在android上运行。我需要在此答案中使用该解决方案,以使其起作用。
Moulde 2015年

10

最后,这篇文章在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;
}

使用时 navigator.app.loadUrl("http://google.com", {openExternal : true}); Android上使用时可以。

通过Cordova 3.3.0。


这是在3.0.0中唯一对我有用的东西。谢谢!!
罗克兰2014年

在3.0中,您需要包含InAppBrowser插件。但是看起来似乎很奇怪。
肖恩·班尼斯特

我将在MainViewController.m中的上一层更改它:-(BOOL)webView:(UIWebView *)WebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {NSURL * url = [request URL]; 如果([[URL方案] isEqualToString:@“ file”] || [[[URL方案] isEqualToString:@“ gap”]){返回[超级webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; } else {[[[UIApplication sharedApplication] openURL:url]; 返回否;}
贾马德里尔

10

这些答案都不够明确,无法在每个平台上打开外部链接。根据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');
    }
});

您到底在哪里覆盖window.open?在网站或
Cordova

最好将您加载到index.html页面中的JavaScript文件的顶部(如果您的网站有帮助的话)
bozdoz

7

如果您碰巧有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

这将是一个很好的主意,但您也应该直接使用window.open调用(并非所有内容都通过链接)
Sebastien Lorber

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

仅当您安装了inappbrowser插件时才有效。要使用终端进行安装,请浏览至项目中的www文件夹并键入:

phonegap plugin add org.apache.cordova.inappbrowser

要么

cordova plugin add org.apache.cordova.inappbrowser

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


该命令phonegap local <command>已被弃用。该命令已委托给phonegap <command>。该命令phonegap local <command>将很快被删除。
Ajay Suwalka 2014年

我过去不知道,但是如今安装此插件的正确方法是cordova plugin add cordova-plugin-inappbrowser
Plinio FM

2

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


1

我正在使用专注于iOS的PhoneGap Build(v3.4.0),并且需要在config.xml中具有此条目,以便PhoneGap能够识别InAppBrowser插件。

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

在此之后,使用window.open(URL,目标)应该按预期工作,如记录在这里


1
m also using PhoneGap Build (v3.5.x) and added the plugin via the config.xml. But what i get is an InAppBrowser without controls an cannot call the safari browser. I只是在使用window.open()。有什么建议吗?
Reinos

如果设置正确,则window.open应该可以正常工作。在我的情况下,window.open正在打开另一个浏览器URL,并且工作正常。确保网址正确。
contactmatt

我刚刚在Phonegap Build上尝试过此操作,但出现了以下错误:“不支持插件:org.apache.cordova.inappbrowser”
David Ball

1

我还遇到了无法在浏览器上打开链接的问题,这是我的修正步骤:

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


-2

像这样 :

<a href="#" onclick="window.open('https://www.nbatou.com', '_system'); return false;">https://www.nbatou.com</a>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.