Phonegap 2.9.0 不在默认浏览器中打开外部链接

Posted 2023-03-07

【中文标题】Phonegap 2.9.0 不在默认浏览器中打开外部链接

【英文标题】：Phonegap 2.9.0 doesn't open external links in default browser

【发布时间】：2013-07-29 14:10:04

【问题描述】：

我想做的非常简单，在设备浏览器上打开一个链接，但它比我想象的要难。

我创建项目并添加 ios 和 android 平台：

$ phonegap create project_name
$ phonegap build ios
$ phonegap build android

我有；在 config.xml 中（尝试了不同的方法，没有一个有效）并且“stay-in-webview”设置为 false。

我在 www/index.html 文件中所做的唯一更改是添加链接，该页面包含所有默认脚本（phonegap.js、js/index.js 和对 app.initialize() 的调用）。

我尝试了所有这些链接，都在 webview 中打开：

<a href="#" onclick="window.open('http://www.google.com', '_blank', 'location=yes');">_blank</a>
<a href="#" onclick="window.open('http://www.google.com', '_system', 'location=yes');">_system</a>
<a href="#" onclick="window.open('http://www.google.com', '_system');">_system</a>
<a href="http://www.google.com" target="_blank">target _blank</a>
<a href="http://www.google.com">no target</a>

明确我所做的所有测试都是在 ios 模拟器和 android 模拟器中完成的。

我已经搜索了很多，尝试了我找到的所有内容，但没有任何效果。感谢您的帮助

【参考方案1】：

要在设备的默认浏览器中打开 Cordova/PhoneGap 应用程序中的链接，您必须确保使用 window.open(<url>, '_system'); 访问它。要让它真正起作用——可能有点违反直觉——你需要启用“InAppBrowser”插件。

在 Cordova 版本 2.9.0 中，“InAppBrowser”插件是内置的，您只需确保它没有在 Cordova 的 config.xml 中被注释掉。从 3.0.0 版本开始，您必须通过在项目目录中运行以下命令来安装插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

来自 Cordova 文档，了解“InAppBrowser”如何在其覆盖实现中使用 window.open() 的第二个参数 target：

target：加载 URL 的目标，可选参数，默认为_self。 (字符串)

_self：如果 URL 在白名单中，则在 Cordova WebView 中打开，否则在 InAppBrowser 中打开。 _blank：在 InAppBrowser 中打开。 _system：在系统的网络浏览器中打开。

为了分离关注点并防止我忘记将onclick 属性添加到我想在默认浏览器中打开的每个<a/>，我喜欢通过javascript 动态附加该行为。下面是一个使用 jQuery 的示例，其中在通过 XHR 重新加载所涉及的 HTML 后，该行为也将重新附加。而且它只会附加到外部链接，因此也无法将其附加到mailto: 链接。

$('#idContentwrapper').on('click', '.colofon-text a', function(event) 
    var href = $(this).attr('href');
    if (typeof href !== 'undefined' &&
        href.substr(0, 7) === 'http://')
    
        event.preventDefault();
        // Open in default browser App (on desktop: open in new window/tab)
        window.open(this.href, '_system', 'location=no');
    
);

【讨论】：

window.open(, '_system');只需添加“_system”，在最新版本的 Phonegap 中，这似乎是可行的方法

如果外部链接少于内部链接的另一种动态方法：$('a[target=_system]').click(function()...)

对于较新的 PhoneGap 版本，您不需要 InAppBrowser 插件。但请确保正确配置了白名单。例如。在 config.xml <access origin="*"/> <plugin name="cordova-plugin-whitelist"/> <allow-intent href="http://*/*"/> 见cordova.apache.org/docs/en/latest/guide/appdev/whitelist/…

【参考方案2】：

我也遇到过这个问题。

似乎大多数回答与问题完全相反，人们通常回答如何在inAppBrowser中打开，我不知道为什么。

就像你一样，我尝试了各种方法，但没有一种奏效。 最后我不得不转向原生方式。 幸运的是，本地方式只花了我不到 10 分钟的时间，这比尝试人们的 phonegap 答案要短得多。

在 Android 中，

在 onCreate 方法中添加一行，将对象绑定到网页的窗口对象。

在您的绑定对象上添加一个方法，该方法接受一个 url 字符串并表现出打开浏览器的行为。

@Override
public void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);

    super.appView.addJavascriptInterface(this, "nativeInterface");


public void openInDeviceBrowser(String url) 
    Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    startActivity(i);

在html中

<a href="#" onclick="window.nativeInterface.openInDeviceBrowser('http://www.google.com/')">Google</a>

对于 iOS 1. 将委托添加到 MainViewController.h（在我的项目中是这个名称）

@interface MainViewController : CDVViewController<UIWebViewDelegate>  

2。将 MainViewController 设置为 webView 的委托，在 - (void)webViewDidFinishLoad:(UIWebView*)theWebView 块中添加以下行

    theWebView.delegate = self;  

3。实现“ - (BOOL)webView:shouldStartLoadWithRequest:navigationType:” 方法：

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType 
if(navigationType==UIWebViewNavigationTypeLinkClicked)

    NSURL* url = [request URL];
    if ([[url scheme] isEqualToString:@"http"]) 
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    

return YES;

最后，改变你的 html 调用如下：

<a href="http://www.google.com/" onclick="window.nativeInterface.openInDeviceBrowser('http://www.google.com/')" target="_blank">Google</a></li>

就是这样。 这比我想象的要容易，而且为我工作。 而且我认为这可以防止将来再次更改phonegap api。

希望这对你也有用。

【参考方案3】：

我不确定这是否仍然相关，但要给出我的 5c：我刚刚对我的 Cordova 3.3（不是 PhoneGap Build）应用程序进行了一些重新配置，并遇到了同样的问题。 您实际上并不需要该插件 - 请确保您链接到：

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

...正如您在项目/xml/config.xml 中发布的重要内容

<access origin="http://127.0.0.1*"/>

我还禁用了应用内浏览器：

<!--
 <feature name="InAppBrowser">
  <param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>    
--> 

...现在它又可以正常工作了；）

【参考方案4】：

让我们回答，但也许它可以帮助某人。

navigator.app.loadUrl('https://google.com/',  openExternal:true );

科尔多瓦 3.3.1

【参考方案5】：

我努力尝试让 PhoneGap 的 inappbrowser 在 Android 上运行，但从来没有运气。话虽如此，我只是利用了 Android 的原生功能（系统浏览器和设备的后退按钮）。我在 config.xml 文件中注释掉了以下 <access origin="*" /> 并添加了 rel="external"到链接： 这很好，链接在设备的浏览器中打开，设备的后退按钮直接回到用户在应用程序中的相同位置。不管设备是否连接到网络，系统也会处理这个问题。

我的 iOS 版本的应用程序在 inappbrowser 上运行良好。

【参考方案6】：

在 iOS 中（至少在 PhoneGap 2.9 中）这是可行的

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

【参考方案7】：

如果要连接到外部链接，请使用 rel 属性。就像<a rel="external" href=""> 一样，一切都会正常运行。