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

Question

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

jqueryioscordovajquery-mobile

12

我在PhoneGap 2.3.0中遇到了与JQuery Mobile 1.2.0相关的问题。

iOS中的任何外部链接都会在应用程序内部打开，而不是打开Safari，这使得用户无法回到应用程序，除非重新启动它。

我已经尝试使用rel ="external"和target ="_blank"来指示它是外部链接,但都没有成功。

我看到PhoneGap与JQMobile的默认操作方式应该是我想要的方式。我发现很多人请求这种行为，但没有反向的方法。

- Gus Fune

你是否将所需链接添加到白名单中了？ - T.Baba

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

我假设你正在进行Android测试。不管怎样，你已经得到了@asgeo1的答案;) - T.Baba

4个回答

7

如果您不想像建议的那样覆盖类或深入代码，请尝试这个方法。对我来说非常有效。我正在使用Phonegap Build和jQuery Mobile。

注意 - 我尝试了几种直接向锚点标记添加属性的方法，例如和target="_system"，但都不起作用，所以我必须使用JavaScript（只有5行）。

这并不太复杂，但我会为您详细介绍...

You need to prevent the default behavior of the anchor tag. So somehow grab onto the a tags you care about. I added a class called "external" to all the anchor tags I wanted to open externally. Pretty standard stuff:
```
$(document).on('click', ".external", function (e) {
    e.preventDefault();
};
```

Then grab the href value from the anchor you're trying to load in safari. Again, nothing too fancy added here:

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

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

This was the bit that took some digging - I guess Phonegap changed their method on this with 2.3? Anyway, open the grabbed href in a new window (here is where "_system" comes in):

$(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/)

- Kyle Simmons

1

$(this).attr("href") 是与一个链接的 this.href 几乎相同。 - commonpike

1

但是它也没有起作用（在PhoneGap 2.5.0中，没有使用jQuery Mobile，并且没有使用PhoneGap Build）：〜/ - commonpike

1

这在我的Android和Phonegap 2.7.0上不起作用。像@pike一样，我没有使用Phonegap Build。尽管如此，我还是点赞了，因为解决方案很聪明，完全遵循文档，并且应该起作用。非常令人沮丧。 - Alan Turing

7

和@KyleSimmons一样的解决方案，但是更加简短。是一个简单的修复方法。对我来说效果很好。

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

- user2335957

-1

在jQuery Mobile中打开外部链接：

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

- Michael Minter

2

问题的关键在于他正在使用Phonegap。因此，我认为Phonegap不会遵守jQuery Mobile创建的任何数据属性。 - asgeo1

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- asgeo1 · Accepted Answer

我在锚点链接中添加了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