[英]How do I gracefully interrupt loading of a certain URL in Cordova's InAppBrowser and open it in the system browser?
I am using Cordova's inappbrowser plugin to display web parts in my app. 我正在使用Cordova的inappbrowser插件在我的应用程序中显示Web部件。 On the website, there are sharing links, eg for WhatsApp:
在网站上,有共享链接,例如WhatsApp:
<a href="whatsapp://send?text=Check this out">Share on WhatsApp</a>
Now when clicking these links in inappbrowser, it simply tries to load whatsapp://send?...
as a URL and displays an error page. 现在,当在inappbrowser中单击这些链接时,它只是尝试加载
whatsapp://send?...
作为URL并显示错误页面。
What I want to do instead is open links that start with whatsapp://
using the given system's browser/URI handler so it resembles the behavior when clicking such link in the system's browser. 我想要做的是使用给定系统的浏览器/ URI处理程序以
whatsapp://
开头的开放链接,因此它类似于在系统浏览器中单击此类链接时的行为。 To do that, I did the following: 为此,我做了以下事情:
urlChanged = function(event) {
// when a "whatsapp://" link is clicked, open it in the system browser
if(event.url.startsWith("whatsapp://")) {
window.open(event.url, "_system");
return;
}
}
// Add an "loadstart" event listener to the inappbrowser:
browser.addEventListener("loadstart", urlChanged);
So far, this somewhat works, but with quirks: 到目前为止,这有点奏效,但有些怪癖:
whatsapp://
link could not be opened ("unknown url scheme"). whatsapp://
链接(“未知网址方案”)。 To mitigate point 2, I also tried the following in the event listener, without success (the behavior is exactly the same): 为了缓解第2点,我还在事件监听器中尝试了以下操作,但没有成功(行为完全相同):
urlChanged = function(event) {
if(event.url.startsWith("whatsapp://")) {
// stop loading the whatsapp:// link in inappbrowser
browser.stop();
// go back in history to display page where whatsapp:// link was on
browser.history.back();
window.open(event.url, "_system");
return;
}
}
browser.addEventListener("loadstart", urlChanged);
Can you guide me how to solve points 1 and 2? 你能指导我如何解决第1点和第2点吗?
So I ended up with the following code: 所以我最终得到了以下代码:
openWithSystemBrowser = function(url) {
window.open(url, "_system");
location.href = "index.html";
};
shareOnWhatsapp = function(url) {
openWithSystemBrowser(url);
};
/**
* Handles URL changes in in-app browser, e.g. to handle logouts or
* unsuccessful logins
*/
urlChanged = function(event) {
if(event.url.startsWith("http://whatsapp://")) {
shareOnWhatsapp(event.url.substr("http://".length));
return;
}
if(event.url.startsWith("whatsapp://")) {
shareOnWhatsapp(event.url);
return;
}
};
This is of course slightly lame as you're always brought back to index.html, but for my purposes it was enough. 这当然有点蹩脚,因为你总是带回index.html,但就我的目的而言,这已经足够了。 Interested to see if anyone's found a more elegant solution.
有兴趣看看是否有人找到了更优雅的解决方案。
It also solved the 2-3 second delay before opening the system browser, but I don't have any clue why, frankly. 它还在打开系统浏览器之前解决了2-3秒的延迟,但坦率地说,我没有任何线索。
I found an approach with a better user experience: When loading an external URL in the system browser, I close the InAppBrowser and reopen it with the last internal URL. 我发现了一种具有更好用户体验的方法:在系统浏览器中加载外部URL时,我关闭InAppBrowser并使用最后一个内部URL重新打开它。
var appUrl = 'https://www.my-website.com';
var app = {
currentUrl: appUrl,
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
app.openBrowser();
},
openBrowser: function() {
var target = '_blank';
var options = [
"location=no",
"clearcache=no",
"clearsessioncache=no",
"footer=no",
"hardwareback=no",
"hideurlbar=yes",
"zoom=no",
"hidenavigationbuttons=no",
"toolbar=yes",
"hidespinner=yes",
"toolbarcolor=#000000",
"toolbartranslucent=no",
"navigationbuttoncolor=#ffffff",
"closebuttoncolor=#000000",
"closebuttoncaption="
];
browser = cordova.InAppBrowser.open(app.currentUrl, target, options.join());
// reopen the browser if it was closed via "Done" button
browser.addEventListener('exit', function(){ app.openBrowser(); } );
// open external urls in system browser window
browser.addEventListener('loadstart', function(event){ app.handleUrl(event.url, browser); });
},
handleUrl: function(url, browser) {
var extension = url.split('.').pop();
// load internal urls that are not pdf files in the app browser
if (extension != 'pdf' && url.startsWith(appUrl)) {
app.currentUrl = url;
return;
}
// open website in system browser window
var ref = cordova.InAppBrowser.open(url, '_system', 'location=no');
// since the inapp browser is loading the website too, close it and open it again with the last internal url visited
browser.close();
app.openBrowser();
return;
}
};
app.initialize();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.