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

Posted 2023-05-09

【中文标题】使用 PhoneGap 在 JQuery Mobile 的外部浏览器中无法打开链接

【英文标题】：Links don't open in external browser in JQuery Mobile with PhoneGap

【发布时间】：2013-01-22 09:25:41

【问题描述】：

我在使用 JQuery Mobile 1.2.0 的 PhoneGap 2.3.0 中遇到问题。

ios 中的任何外部链接都会在应用内打开，而不是在应用内打开 Safari，这样用户就无法在不重新启动的情况下返回应用。

我尝试了 rel="external" 和 target="_blank" 来表明它是一个外部链接，但都没有成功。

我已经看到带有 JQMobile 的 PhoneGap 的默认行为方式是我想要的方式。我发现很多对这种行为的要求，但不是这样。

【问题讨论】：

你有没有把愿望链接加入白名单？

是的，我做到了。实际上 * 在开发过程中被列入白名单。

我假设您正在 android 上进行测试。无论如何，你得到了@asgeo1 的答案；）

【参考方案1】：

我在锚链接中添加了rel="external"。

然后在MainViewController类中添加/覆盖shouldStartLoadWithRequest方法：

- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

    NSURL *url = [request URL];

    // Intercept the external http requests and forward to Safari.app
    // Otherwise forward to the PhoneGap WebView
    if ([[url scheme] isEqualToString:@"http"] || [[url scheme] isEqualToString:@"https"])
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    
    else 
        return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
    

这适用于 jQuery Mobile 1.2 和 Phonegap 2.2.0。它在 Phonegap 2.3.0 中应该可以正常工作 - 但我还没有测试过。

================================================ ====================================

更新：

在 Phonegap 2.7.0 或更高版本中可能不需要这样做。 Phonegap 现在可以在 UIWebView、Safari 或 InAppBrowser 组件中打开链接。我个人喜欢 InAppBrowser 组件，因为它对于很多用例来说似乎是更好的用户体验。如果您想在 Safari 中打开链接，您现在可以使用 javascript 执行此操作：

window.open('http://whitelisted-url.com', '_system');

或者对于 InAppBrowser：

window.open('http://whitelisted-url.com', '_blank');

在这里查看更多信息：

http://wiki.apache.org/cordova/InAppBrowser http://docs.phonegap.com/en/2.7.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

【讨论】：

那没有成功。同样的行为不断发生。该链接在同一页面中打开，阻止用户返回应用程序。

@gusfune - 我已经更新了我的答案。抱歉，我很困惑并粘贴了错误的代码 sn-p。正确的覆盖方法是shouldStartLoadWithRequest in MainViewController

适用于 Phonegap 2.4。

该代码已在 phonegap 2.5.0 中移动。我已经将您的if 放在 CDVViewController.m 的第 557 行，并且.. 它可以工作。这将覆盖所有不起作用的目标、rel、配置、javascript 内容。它绝对是一个黑客。

Im using window.open but that doesnt seem to work. Im using PhoneGap Build with v3.5.x 有什么建议吗？

【参考方案2】：

如果您不想按照建议覆盖类或在代码中挖掘太深，试试这个。它对我来说就像一个魅力。我正在使用 Phonegap Build 和 jQuery Mobile。

*注意 - 我尝试了其他几种将属性直接添加到锚标签的方法，例如<a href="http://externalsite.com target="_blank" data-rel="external" data-ajax="false"> 也尝试过 target="_system - 但没有成功，所以我不得不使用 javascript（不过只有 5 行）。

这不是太复杂，但我会引导你完成它......

您需要阻止锚标记的默认行为。所以以某种方式抓住你关心的标签。我向我想在外部打开的所有锚标记添加了一个名为“外部”的类。相当标准的东西：

$(document).on('click', ".external", function (e) 
    e.preventDefault();
;

然后从您尝试在 Safari 中加载的锚点中获取 href 值。同样，这里没有添加任何花哨的东西：

$(document).on('click', ".external", function (e) 
    e.preventDefault();

    var targetURL = $(this).attr("href");
;

这是需要一些挖掘的部分 - 我猜 Phonegap 在 2.3 中改变了他们的方法？无论如何，在新窗口中打开抓取的href（这里是"_system" 的来源）：

$(document).on('click', ".external", function (e) 
    e.preventDefault();
    var targetURL = $(this).attr("href");

    window.open(targetURL, "_system");
);

就是这样。最后一点代码就是一切。至少这对我有用。

祝你好运！

（为了在应得的地方给予赞扬，这是对我帮助最大的地方：http://www.midnightryder.com/launching-external-urls-in-phonegap-again-phonegap-2-4-x/）

【讨论】：

$(this).attr("href") 与链接的this.href 相同。差不多了。

.. 但它也不起作用（在 phonegap 2.5.0 中，没有 jquery mobile，并且不使用 phonegap 构建）：~/

这对我在 Android 和 Phonegap 2.7.0 上不起作用。像@pike 一样，我没有使用Phonegap Build。仍然赞成它，因为解决方案很聪明，完全遵循文档，并且应该工作。非常令人沮丧。

【参考方案3】：

与@KyleSimmons 相同的解决方案，但只是内联的，而且更短。但一个简单的修复。对我来说效果很好。

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

【参考方案4】：

在 jQuery Mobile 中打开外部链接：

<a href="http://moorberry.net" data-rel="external">Like this</a>

【讨论】：

问题的关键是他正在使用Phonegap。所以我认为 Phonegap 不会遵守 jQuery Mobile 创建的任何数据属性。

我已经尝试过这个，它给了我相同的行为，我正在尝试修复：/