如何在Cordova的InAppBrowser中優雅地中斷加載某個URL並在系統瀏覽器中打開它？

Question

我正在使用Cordova的inappbrowser插件在我的應用程序中顯示Web部件。 在網站上，有共享鏈接，例如WhatsApp：

<a href="whatsapp://send?text=Check this out">Share on WhatsApp</a>

現在，當在inappbrowser中單擊這些鏈接時，它只是嘗試加載whatsapp://send?...作為URL並顯示錯誤頁面。

我想要做的是使用給定系統的瀏覽器/ URI處理程序以whatsapp://開頭的開放鏈接，因此它類似於在系統瀏覽器中單擊此類鏈接時的行為。 為此，我做了以下事情：

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);

到目前為止，這有點奏效，但有些怪癖：

1. 當用戶單擊WhatsApp鏈接（通過觸發警報進行檢查）時，事件立即觸發，系統瀏覽器實際打開需要兩到三秒鍾。
2. 在等待這2-3秒並返回應用程序時，用戶會看到一個inappbrowser錯誤頁面，無法打開whatsapp://鏈接（“未知網址方案”）。

為了緩解第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);

你能指導我如何解決第1點和第2點嗎？

Answer 1

所以我最終得到了以下代碼：

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;
    }
};

這當然有點蹩腳，因為你總是帶回index.html，但就我的目的而言，這已經足夠了。 有興趣看看是否有人找到了更優雅的解決方案。

它還在打開系統瀏覽器之前解決了2-3秒的延遲，但坦率地說，我沒有任何線索。

Answer 2

我發現了一種具有更好用戶體驗的方法：在系統瀏覽器中加載外部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();