在我们的PhoneGap iOS应用中,我们使用InAppBrowser插件来展示一些内容,并且我们需要从InAppBrowser中打开Safari浏览器。
我们该如何使得在InAppBrowser中的链接能够在Safari中打开?
在我们的PhoneGap iOS应用中,我们使用InAppBrowser插件来展示一些内容,并且我们需要从InAppBrowser中打开Safari浏览器。
我们该如何使得在InAppBrowser中的链接能够在Safari中打开?
来自PhoneGap文档:
Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.
var ref = window.open(url, target, options);
- ref: Reference to the InAppBrowser window. (InAppBrowser)
- url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.
target: The target in which to load the URL, an optional parameter that defaults to _self. (String)
- _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
- _blank: Opens in the InAppBrowser.
- _system: Opens in the system's web browser.
回答你的问题,使用以下方法:
window.open(your_url, '_system', opts);
我认为我对问题有些误解(感谢评论者@peteorpeter)——你想要一种点击InAppBrowser中的链接并在系统浏览器中打开它的方法(例如,在iOS上的Mobile Safari)。这是可能的,但它需要一些预先考虑和应用程序开发人员与页面链接负责人之间的合作。
当你创建一个IAB实例时,你会得到一个引用:
var ref = window.open('http://foo.com', '_blank', {...});
ref.addEventListener('loadStart', function(event){ ... });
systemBrowser
标志:
.....html?foo=1&systemBrowser=true
在事件处理程序中查找该标志,并在找到时跳转到系统浏览器。ref.addEventListener('loadStart', function(event){
if (event.url.indexOf('systemBrowser') > 0){
window.open(event.url, '_system', null);
}
});
很遗憾,target=_system
在InAppBrowser中不起作用。(如果链接来自父级应用程序,则会起作用。)
如果适合您的用例,您可以在IAB中添加事件监听器并嗅探特定的URL模式,就像您在评论中提到的那样。
iab.addEventListener('loadstart', function(event) {
if (event.url.indexOf("openinSafari") != -1) {
window.open(event.url, '_system');
}
}
这里的“event”不是真正的浏览器事件 - 它是IAB插件的构造 - 不支持event.preventDefault()
,因此IAB将加载URL(除了Safari之外)。您可以尝试使用类似以下代码在IAB内部处理该事件:
iab.addEventListener('loadstop', function(event) {
iab.executeScript('functionThatPreventsOpenInSafariLinksFromGoingAnywhere');
}
……这是我尚未测试过的。
这条消息是为了澄清:
如果你通过在loadstart事件中捕获一个链接并使用window.open打开另一个窗口,那么它将会终止你分配给第一个IAB的事件处理程序。
例如:
iab = window.open('http://example.com', '_blank', 'location=no,hardwareback=yes,toolbar=no');
iab.addEventListener('loadstop', function(event) {console.log('stop: ' + event.url);});
iab.addEventListener('loaderror', function(event) { console.log('loaderror: ' + event.message); });
iab.addEventListener('loadstart', function(event) {
if (event.url.indexOf("twitter") != -1){
var ref2 = window.open(event.url, '_system', null);
}
});
window.open()
在 InAppBrowser 中无法正常工作,无论我是否添加 cordova.js 的脚本引用以获取对 window.open(...'_system')
的支持。因此,我想出了以下解决方案,通过哈希标记将“外部”URL隧道传回到 IAB 主机,以便在那里打开。
在 InAppBrowser 实例内部(我正在使用 AngularJS,但如果您使用 jQuery,则可以将 angular.element
替换为 jQuery
或 $
):
angular.element(document).find('a').on('click', function(e) {
var targetUrl = angular.element(this).attr('href');
if(targetUrl.indexOf('http') === 0) {
e.preventDefault();
window.open('#' + targetUrl);
}
});
inAppBrowser.addEventListener('loadstart', function(e) {
if(e.url.indexOf('#') > 0) {
var tunneledUrl = e.url.substring(e.url.indexOf('#') + 1);
window.open(tunneledUrl, '_system', null);
}
});
loadstart
处理程序能够在 Safari 中打开请求的 URL。
} } - Vilas M.
event.preventDefault()
。这将防止执行默认事件操作。 - Greg