在Phonegap InAppBrowser中处理Android返回按钮

Question

我希望在使用InAppBrowser浏览页面时禁用或覆盖Android返回按钮。我能添加一个事件监听器来处理吗？

编辑：根据 @T_D 的答案，提供的解决方案是我所能得到的最接近的。似乎不可能在InAppBrowser中覆盖该按钮，因为当浏览此插件上的页面时，所有PhoneGap的调整都停止工作。我无法找到其他解决方案，除了修改API库。如果这里有任何PhoneGap专家并且知道更多信息，我将很高兴得到一些评论。谢谢。

我得到的最接近的：

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

- Dimosthenis Kontogiorgos

---

嘿，我发布了一个新的答案，对我来说有效，你可以在下面检查它，希望对你也有用。 - Albert

Answer 1

根据文档，现在可以配置InAppBrowser的硬件返回按钮行为：

hardwareback: 设置为yes以使用硬件返回按钮通过InAppBrowser的历史记录向后导航。如果没有上一页，则InAppBrowser将关闭。默认值为yes，因此如果要使返回按钮仅关闭InAppBrowser，则必须将其设置为no。

感谢Kris Erickson。

因此，如果需要向后导航，请更新您的InAppBrowser插件。

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

- lhaferkamp

---

我设置hardwareback = 'no'来关闭InAppBrowser，它可以关闭InAppBrowser，但也关闭了我的应用程序。如果我的应用程序打开InAppBrowser，如何返回到我的应用程序？ - Setu Kumar Basak

Answer 2

现在（自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窗口。

- Kris Erickson

---

这是一个很好的答案，不过应该有一个JavaScript解决方法，否则你就失去了使用PhoneGap的意义。 - Dimosthenis Kontogiorgos

同意，而且打开命令可能应该有一个选项（因为从iOS到Android的选项已经存在很大差异），以允许两种选项。 - Kris Erickson

我已经为此提交了一个拉取请求，并且它在我的InAppBrowser分支中可用（https://github.com/kriserickson/cordova-plugin-inappbrowser）。 - Kris Erickson

@Albert，你只需要使用标准的 Cordova 插件 CLI。它应该像这样简单：cordova plugin add https://github.com/kriserickson/cordova-plugin-inappbrowser.git。 - Kris Erickson

非常好的答案，完全有效。不过最好再进一步，使得使用返回按钮关闭inAppBrowser成为一个选项。 - hobberwickey

Answer 3

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

在PhoneGap中有一个事件监听器可以覆盖后退按钮，但不适用于InAppBrowser。

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

重写后退按钮的替代事件监听器 - OP 说这也不起作用 -

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

在一个Activity中重写后退按钮 - 这是普通的Java代码，显然在PhoneGap中不起作用。

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

结论:

以上解决方案均未奏效，以下链接（这个答案、这个和第三个）也没有帮助。因此，在PhoneGap中覆盖InAppBrowser的返回按钮是不可能的。如果有人想出了解决方案或者在新的PhoneGap版本中有所改变，请随时告诉我们...

编辑:

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

cordova plugin add org.apache.cordova.inappbrowse

这个插件在WP8上的作用是，每当你在InAppBrowser中打开任何链接/页面时，它将覆盖后退/前进/关闭按钮。

参考这张图片：

- T_D

---

没错，这不应该起作用，因为Javascript是PhoneGap应用程序的首选。你试过像这样的东西吗？ function onDeviceReady(){ document.addEventListener("backbutton", onBackKeyDown, false); } 或者也许这个答案可以帮助。实际上我还不太了解PhoneGap，但我会尽力帮助你的... - T_D

是的，我也尝试过那个。它在所有的PhoneGap页面上都有效，但在InAppBrowser内部却不起作用。似乎当InAppBrowser实例采取行动时，其余的PhoneGap规则并不真正适用；再说它在PhoneGap上还很新。而且似乎周围没有人遇到过类似的问题。 - Dimosthenis Kontogiorgos

@LeonardZelig 如果您编辑问题并分享您的代码，可能会有所帮助 :) 好吧，我想我在这里找到了一些有趣的东西（https://dev59.com/emkw5IYBdhLWcg3wzdzZ#9662760）和那里（http://developer.appcelerator.com/question/56391/how-to-add-event-listener-to-back-button-in-the-navigation-group-），但从来不是关于处理Inappbrowser中的后退按钮。也许这根本不可能... - T_D

嗨@T_D，感谢你的努力。我能找到的最接近的是你发布的事件监听器，但正如所说，它也没有起作用。不过，如果下一个PhoneGap版本中有任何新内容，那将是很好的。 - Dimosthenis Kontogiorgos

我认为解决方案是目前还不可能，所以接受答案 :) - Dimosthenis Kontogiorgos

Answer 4

这对我在PhoneGap 2.7上有效，在这里获得了帮助：如何在一个页面上禁用Android返回按钮并在其他每个页面上更改为退出按钮。

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

- JamesRLamar

---

截至2017年2月，此答案适用于最新的Cordova 6.5.0和InAppBrowser 1.5.0。 - William Isted

Answer 5

我曾经遇到过同样的问题，最终解决了它。为了帮助其他人，我在此发布答案。

这是我使用的代码：

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

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

关键是要附加退出事件，当设备的后退按钮被点击时就会调用该事件。

顺便提一下，我使用了cordova.js，并且使用Cordova CLI本地构建我的应用程序，不知道这是否有任何影响，我只是提一下。

- Albert

---

6个小时一直在干！你是救命恩人兄弟。 - P-RAD

Answer 6

使用jQuery移动端：

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

- Marcin S.

---

嘿，Marcin，谢谢，但似乎在InAppBrowser上也不起作用。 - Dimosthenis Kontogiorgos

Answer 7

我正在使用 Cordova 5.1.1，当我在 inappbroswer 中加载页面时，我想使后退按钮在 inappbrowser 退出返回我的 index.html 页面之前一直工作，因为它是空白的并且只是坐在那里。因此，我使用以下代码来解决这个问题。它在退出 inappbrowser 时退出应用程序。

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

- Post Impatica

Answer 8

我知道这个问题已经有答案了，但我为那些任何一个答案都不适用的人（比如我自己）发布我的答案：

所以我有一个多页面应用程序，用于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;是基于...

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

之后，InAppBrowser 插件运行良好，我可以在所有页面上正确地处理返回按钮。

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

希望这有所帮助。

- Pouya Danesh

Answer 9

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

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

重新打开浏览器。然后，如果您愿意，可以使用browser.executeScript()来向在浏览器中加载的Web应用程序发送信号。

受此论坛帖子启发。

- wvengen