使用PhoneGap / Cordova中的InAppBrowser在默认浏览器中打开链接

时间:2014-09-09 11:21:40

标签: javascript cordova phonegap-build inappbrowser

我正在构建一个应用程序,它将响应式在线网站包装成一个易于使用的系统,使用PhoneGap(特别是PhoneGap Build)和InAppBrowser。

该应用加载并运行正常,但一项功能除外 - 在系统的默认浏览器中打开外部链接。

这是95%有效,但是特定情况会导致链接重定向的问题(例如http://www.facebook.com重定向到https://www.facebook.com重定向到https://m.facebook.com。)

使用我的代码,它检测到URL已超出配置的域并在新的系统窗口中打开,但是还会加载其他两个重定向并将其加载到应用程序中。

所需的操作是在系统的默认浏览器中打开链接并停止所有进一步处理,包括重定向。

请注意,只需将target从HTML页面上的链接更改为_system即可,因为它来自应用程序外部,因为它来自实时网站。

非常感谢任何提示和建议。

最重要的代码摘录如下:

在PhoneGap应用内:

//Called on deviceready
function launchSite(){
    // Get Webpage in InAppBrowser (using the _blank target) and hide it until loaded
    iabRef = window.open(url+'?inApp=true'), '_blank', 'location=no,hidden=yes');

    //Attach listener for external link intercepting
    iabRef.addEventListener('loadstart', iabLoad);
    //Attach listener for loading complete
    iabRef.addEventListener('loadstop', iabLoaded);     
}

//Check if links are external, if they are, open them in the system's default browser
function iabLoad(event){
    if(debug) alert('Page load request for ' + event.url);
    //Check the link to see if it is external, which is flagged by #appExt from injection.js
    if(event.url.indexOf('appExt') > -1){
        //Open the window using the _system target to use the system's default browser
        if(debug) alert('Opening '+event.url + ' in system window')
        window.open(event.url,'_system');

        if(debug) alert('Stopping anything more');
        //Mobile redirects keep triggering load events from initial link, stop the process now.
        window.stop(); // <-Does not stop
    }
    else{
        if(debug) alert('Opening normally without interference');
    }
}

//If window was hidden whilst loading, show it now that it has loaded
function iabLoaded(event){
    if(debug) alert('Showing IAB window');
    iabRef.show();
}

来自响应式网站中包含的javascript文件:

function isExternal(url) {
    var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
    if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
    if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") !== location.host) return true;
    return false;
}

function goToPage(url, external){
    if(external)
        //Go to new URL with appended hash flag
        window.location=encodeURI(url)+'#appExt';
    else{
        //Show loading screen
        $('#app-overlay').css('display','block');
        //Wait for 100ms then change page, so the loading screen gets time to show
        setTimeout(function(){window.location=encodeURI(url)},100);
    }
}

$('a').on('click',function(e){
    e.preventDefault();

    if(isExternal($(this).attr('href'))){
        //If the URL is an external one, the app.js file will open the url in a new window after setting the appExt hash flag
        if(debug) alert('Stopping navigation from injection.js as external link detected');
        goToPage($(this).attr('href'), true);
    }
    else{
        //Otherwise, continue normally
        if(debug) alert('Regular link clicked');
        goToPage($(this).attr('href'), false);
    }

    //Cancel the default link operation, as we've already handled it
    return false;
});

更新:继续调整和重新编译并没有让我更进一步 - 任何人都能为我注意这一点?

2 个答案:

答案 0 :(得分:1)

我不确定这是最好的答案,但我已经解决了#34;它通过跟踪访问过的最后一个URL(通过startLoad事件),当我看到有人链接到某个地方而不是已经加载的网站(使用startLoad事件)时,我用_system做一个window.open在外部URL上,然后将InAppBrowser的页面更改回它所在的最后一个URL(我正在跟踪)。

不是最优雅的,但我找不到任何其他方式去做,而且似乎工作也不错。使用cordova 3.6.3(希望下周升级)和inAppBrowser 0.6.0。如果有人认为它可能有用,我可以发布代码片段。

答案 1 :(得分:0)

您是否尝试window.open在浏览器中打开链接? 在我们的应用程序中,我们这样做

<span class="item_link"><a href="#" onclick="window.open(\''+ YourUrl +'\', \'_system\');">' + MoreLink + '</a></span>