Question

我想在InAppBrowser上导航页面时禁用或覆盖Android Back按钮。我可以添加一个可以处理它的事件监听器吗？

修改通过下面的@T_D查看答案提供的解决方案是我能得到的最接近的答案。似乎无法覆盖InAppBrowser中的按钮，因为在此插件上导航页面时，所有PhoneGap调整都停止工作。我无法找到任何其他解决方案而不是修改API库。如果这里有任何PhoneGap的人并且知道更多的事情，我很乐意得到一些评论。感谢。

我最接近的是：

var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () { })

Answer 1

根据documentation，现在可以为InAppBrowser配置硬件后退按钮的行为：

hardwareback：设置为yes以使用硬件后退按钮向后导航InAppBrowser的历史记录。如果没有上一页，则InAppBrowser将关闭。默认值为yes，因此如果希望后退按钮只是关闭InAppBrowser，则必须将其设置为no。

感谢Kris Erickson。

如果向后导航是所需的行为，那么只需更新您的InAppBrowser插件。

有关详细信息，请参阅：https://github.com/apache/cordova-plugin-inappbrowser/pull/86

Answer 2

编辑注意：据我所知，无法覆盖PhoneGap中InAppBrowser的后退按钮。但我尽力寻找可能的解决方案......

有一个eventListener覆盖PhoneGap中的后退按钮 - 不适用于InAppBrowser -

function onDeviceReady(){
    document.addEventListener("backbutton", onBackKeyDown, false);
}

替代eventListener来覆盖后退按钮 - OP表示这不起作用 -

var ref = window.open('http://www.stackoverflow.com', '_blank', 'location=yes');
ref.addEventListener("backbutton", function () {
    //logic here
})

覆盖活动中的后退按钮 - 这是普通的java，显然在PhoneGap中不起作用 -

@Override
public void onBackPressed()
{
   //logic here
}

<强> 结论：

以上解决方案无法正常工作，以下链接（this answer，this one和third one）也没有帮助。所以很有可能在PhoneGap中覆盖InAppBrowser的后退按钮是不可能的。如果有人确实提出了解决方案，或者新的PhoneGap版本发生了变化，请随时告诉我们......

修改

安装此插件可能会带您到最近的解决方案：

cordova plugin add org.apache.cordova.inappbrowse

此插件将在 WP8 中执行的操作，无论何时打开任何链接，它都会覆盖 InAppBrowser 上的后退/前进/关闭按钮页面里面。

看到这张图片：

Answer 3

这在PhoneGap 2.7中对我有用，帮助来自这里，How do I disable Android Back button on one page and change to exit button on every other page

document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("backbutton", function (e) {
            e.preventDefault();
        }, false );
}

Answer 4

您现在可以非常轻松地完成此操作（从InAppBrowser版本0.3.3开始），但您必须编辑Java文件。转到src / com / org / apache / corodova / inappbrowser目录并编辑InAppBrowserDialog.java：

更改

 public void onBackPressed () {
    if (this.inAppBrowser == null) {
        this.dismiss();
    } else {
        // better to go through the in inAppBrowser
        // because it does a clean up            
        this.inAppBrowser.closeDialog();           
    }
}

到

public void onBackPressed () {
    if (this.inAppBrowser == null) {
        this.dismiss();
    } else {
        if (this.inAppBrowser.canGoBack()) {
            this.inAppBrowser.goBack();
        }  else {
            this.inAppBrowser.closeDialog();
        }
    }
}

然后转到InAppBrowser并找到goBack函数，更改：

/**
 * Checks to see if it is possible to go back one page in history, then does so.
 */
private void goBack() {
    if (this.inAppWebView.canGoBack()) {
        this.inAppWebView.goBack();
    }
}

到

/**
 * Checks to see if it is possible to go back one page in history, then does so.
 */
public void goBack() {
    if (this.inAppWebView.canGoBack()) {
        this.inAppWebView.goBack();
    }
}

public boolean canGoBack() {
    return this.inAppWebView.canGoBack();
}

现在硬件返回按钮将返回，直到没有更多的后台要做。我真的认为这应该是android中的默认行为，因为Done按钮已经关闭了InAppBrowser窗口。

Answer 5

我遇到了同样的问题并最终得到了解决，我会在这里发布答案以防万一。

这是我使用的代码：

window.new_window = window.open(url, '_blank', 'location=no');

window.new_window.addEventListener("exit", function () {
    window.new_window.close();
});

所以关键基本上是附加退出事件，当点击设备的后退按钮时会调用该事件。

BTW，我使用cordova.js，并使用 Cordova CLI 在本地构建我的应用程序，我不知道这是否有所不同，我提到它以防万一。

Answer 6

使用jQuery mobile：

$(document).on('backbutton',
 function(e){
     e.preventDefault();
     // YOUR CODE GOES HERE
});

Answer 7

运行Cordova 5.1.1，当我在inappbroswer中加载页面时，我喜欢让后退按钮工作，直到inappbrowser退出到我的index.html页面，因为它是空白的，只是坐在那里。所以我使用以下代码来解决这个问题。它退出应用程序时退出应用程序。

window.open = cordova.InAppBrowser.open;                
            var ref = window.open(url, '_blank', 'location=no');
            ref.addEventListener('exit', function () {
                navigator.app.exitApp();
            });

Answer 8

据我所知，无法覆盖或检测inAppBrowser中的后退按钮。当您按下后退按钮时，inAppBrowser将隐藏并将控制权返回给Phonegap页面。您可以使用窗口上的focus事件（使用jQuery）来捕获此信息，例如

var browser = window.open('http://example.com', '_blank', 'location=no');
$(window).on('focus', function() {
    browser.show();
});

重新打开浏览器。然后，您可以使用browser.executeScript()来表示浏览器中加载的webapp，如果您愿意的话。

受this forum post的启发。

Answer 9

我知道这个问题已经有了答案，但是我发布了答案，对于那些任何答案都不适合他们的人（比如我自己）：

所以我有一个针对Android和IOS的多页面应用程序，我正在使用cordova 5.x，我在每个页面中添加了以下代码，除了我需要的页面InAppBrowser：

delete window.open;

然后对于我使用的其余页面：

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(event) {
// your code for handling back button comes here
}

用于处理后退按钮

请注意：delete window.open;基于documentation

手动恢复'window.open'的默认行为

之后，InAppBrowser插件运行良好，我在所有页面中正确处理了按钮。

最后一件事不要忘记在需要InAppBrowser的页面中添加：<script type="text/javascript" charset="utf-8" src="cordova.js"></script>。

希望这有帮助。

处理Phonegap InAppBrowser上的Android后退按钮

9 个答案: