phonegap 在浏览器中打开链接

Posted

技术标签:

【中文标题】phonegap 在浏览器中打开链接【英文标题】:phonegap open link in browser 【发布时间】:2013-07-26 17:21:25 【问题描述】:
<a target="_blank" data-rel="external" href="http://www.kidzout.com">www.kidzout.com</a>

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

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

【问题讨论】:

如果你想打开 _blank 到外部浏览器和 _self 到 WebView,请查看我的 Cordova 5.1.1 2015 解决方案:***.com/a/32227524/82609 另见类似问题的答案:***.com/a/26176013/1480587 和 ***.com/a/46619378/1480587 【参考方案1】:

按照a similar question 中的建议,使用javascript 调用window.open,并将target 参数设置为_system,根据InAppBrowser documentation:

<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

【讨论】:

是的,我也在科尔多瓦 1.7.0 中使用了相同的 target="_blank" 但现在我正在使用 2.9.0,这让我很恼火,你的 sujjestion 也没有奏效...... ...:( 是的,我也尝试过,并按照您分享的链接进行操作,感谢您的帮助,但问题仍然存在,该网站仍在应用程序中打开......:( 嘿,ahsan,您介意详细说明您的问题吗?我想我可能遇到了同样的问题。 记住你必须安装 InAppBrowser 插件才能工作,这里的说明:cordova.apache.org/docs/en/3.0.0/… 我有同样的问题.. 解决方案不起作用 :( 它作为常规链接打开(在 android 上)【参考方案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://***.com">

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

【讨论】:

优秀的答案。万一它不适合其他人,请确保您的 www/cordova_plugins.js 同时包含设备和 inappbrowser 配置。当我安装插件时,它会将 js 和插件配置添加到暂存文件夹,而不是我的主要工作 www 文件夹。一旦我整理了配置和位置,这一切都很好。 这是最好的答案!请记住,您没有通过以下方式安装 InAppBrowser 插件:$ meteor add cordova:org.apache.cordova.inappbrowser@0.5.4 如果有人想为 sn-p 做出贡献,我将其上传到 gist。 gist.github.com/redolent/e79722b32a48a536b5ba【参考方案3】:
<a onclick="navigator.app.loadUrl('https://google.com/',  openExternal:true );">Link</a>

适用于我的安卓和 PG 3.0

【讨论】:

在 Android 2.3.7 和 4.2.2 上对我来说似乎仍然失败。 在带有 Cordova 3.3.0 的 Android 4.4.2 上为我工作。但不适用于 iOS 6.1。 为我工作 cordova 3.3.0,谢谢,您从哪里获得这些信息?在文档中找不到。 这对我来说适用于 cordova 3.4.1 和 android 4.2。我不需要插件。我会在 iOS7 上测试后报告。 这是唯一适用于我的安卓解决方案,谢谢【参考方案4】:

在 android 和 iphone 中打开 URL 有两种不同的方式。

对于 IOS 使用以下代码。

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

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

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

【讨论】:

Cordova 也可以使用window.open("http://google.com", '_system')。你不应该使用navigator.app.loadUrl,因为它不适用于market:// URL:在这种情况下,它只会关闭你的应用程序并在同一个窗口中打开......并不总是更可取。 Agamemnus,window.open 在我的 phonegap 3.6 应用程序中无法在 android 上运行。我需要使用此答案中的解决方案才能使其正常工作。【参考方案5】:

这些答案都不够明确,无法在每个平台上打开外部链接。根据inAppBrowser docs:

安装

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 文件的顶部【参考方案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。

【讨论】:

这是 3.0.0 中唯一对我有用的东西。谢谢!! 在 3.0 中,您需要包含 InAppBrowser 插件。不管这看起来多么奇怪。 我会在 MainViewController.m 中将其更改为上一层: - (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType NSURL *url = [请求网址]; if ([[url scheme] isEqualToString:@"file"] || [[url scheme] isEqualToString:@"gap"]) return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType]; else [[UIApplication sharedApplication] openURL:url];返回否; 【参考方案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 (并非所有内容都通过链接)【参考方案8】:
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 &lt;command&gt; 已被弃用。该命令已委托给phonegap &lt;command&gt;。命令phonegap local &lt;command&gt; 即将被删除。 以前不知道,现在安装这个插件的正确方法是cordova plugin add cordova-plugin-inappbrowser【参考方案9】:

在 Cordova 5.0 及更高版本中,插件 InAppBrowser 在 Cordova 插件注册表中被重命名,因此您应该使用

安装它
cordova plugin add cordova-plugin-inappbrowser --save

然后使用

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

【讨论】:

【参考方案10】:

我正在使用 PhoneGap Build (v3.4.0),重点关注 iOS,我需要在我的 config.xml 中有这个条目,以便 PhoneGap 识别 InAppBrowser 插件。

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

之后,使用 window.open(url, target) 应该可以按预期工作,如 here 所记录的那样。

【讨论】:

Im 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. Im 只是使用 window.open()。有什么建议吗? 如果设置正确,window.open 应该可以正常工作。在我的情况下,window.open 正在打开另一个浏览器 url,它工作正常。确保 URL 正确。 我刚刚在 Phonegap Build 中尝试过,但报错:“plugin unsupported: org.apache.cordova.inappbrowser”【参考方案11】:

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

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

【讨论】:

【参考方案12】:

像这样:

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

【讨论】:

以上是关于phonegap 在浏览器中打开链接的主要内容,如果未能解决你的问题,请参考以下文章

使用 PhoneGap 在 JQuery Mobile 的外部浏览器中无法打开链接

Phonegap / Cordova ios外部链接iframe无法在safari中打开

如何从 PhoneGap 3.1 应用程序打开外部链接到 Safari/Chrome 浏览器?

Phonegap ChildBrowser 通过自定义 iOS url 打开外部 URL

包含 Google Admob 插件时,Phonegap/Cordova 2.9 iOS 应用内浏览器未打开

如何在本机 Web 浏览器中打开链接(常见建议不起作用)?