【问题标题】:Handle Android Back Button on Phonegap InAppBrowser处理 Phonegap InAppBrowser 上的 Android 后退按钮
【发布时间】:2013-05-10 06:34:40
【问题描述】:

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

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

我得到的最接近的:

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

【问题讨论】:

  • 嘿,我发布了一个对我有用的新答案,你可以在下面查看它,希望对你也有用

标签: android cordova inappbrowser


【解决方案1】:

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

hardwareback:设置为 yes 以使用硬件后退按钮向后浏览 InAppBrowser 的历史记录。如果没有上一页,InAppBrowser 将关闭。默认值为yes,因此如果您希望返回按钮简单地关闭InAppBrowser,则必须将其设置为no。

感谢Kris Erickson

因此,如果向后导航是所需的行为,只需更新您的 InAppBrowser 插件即可。

更多详情见:https://github.com/apache/cordova-plugin-inappbrowser/pull/86

【讨论】:

  • 我设置 hardwareback = 'no' 来简单地关闭 InAppBrowser。它正在关闭 InAppBrowser,但也关闭了我的应用程序。如果我的应用打开了 InAppBrowser,如何返回我的应用?
【解决方案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 窗口。

【讨论】:

  • 这是一个很好的答案,虽然应该有一个 Javascript 解决方法,否则你会失去使用 PhoneGap 的意义。
  • 同意,并且可能应该有一个选项可以传递给 open 命令(因为选项已经从 ios 到 android 差异很大)以允许两个选项。
  • 我已经为此提出了拉取请求,它可以在我的 InAppBrowser 分支 (github.com/kriserickson/cordova-plugin-inappbrowser) 中找到
  • @KrisErickson 抱歉我的无知,我对cordova 很陌生,我该如何在我的cordova 应用程序中安装InAppBrowser 插件的分支?我通常通过 CLI (cordova plugin add ...) 安装它们。我应该下载什么文件,我应该把它们放在哪里?谢谢!
  • @Albert 您只需使用标准的 cordova 插件 CLI。它应该像cordova plugin add https://github.com/kriserickson/cordova-plugin-inappbrowser.git 一样简单。
【解决方案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 );
}

【讨论】:

  • 截至 2017 年 2 月,此答案适用于最新的 Cordova 6.5.0InAppBrowser 1.5.0
【解决方案4】:

我遇到了同样的问题,终于让它工作了,我会在这里发布答案,以防它帮助别人。

这是我使用的代码:

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

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

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

顺便说一句,我使用 cordova.js,并使用 Cordova CLI 在本地构建我的应用程序,我不知道这是否有什么不同,我提一下以防万一。

【讨论】:

  • 连续 6 小时!!你是救命恩人
【解决方案5】:

编辑说明: 据我所知,无法覆盖 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
})

覆盖 Activity 中的后退按钮 -这是纯 Java,显然在 PhoneGap 中不起作用-

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

结论

上述解决方案不起作用,以下链接(this answerthis onethird one)也没有帮助。因此,很有可能无法在 PhoneGap 中覆盖 InAppBrowser 的后退按钮。如果有人确实提出了解决方案,或者如果新的 PhoneGap 版本发生了变化,请随时告诉我们...

编辑:

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

cordova plugin add org.apache.cordova.inappbrowse

这个插件会做什么,在 WP8 中,每当您打开任何链接/里面的页面。

看这张图片:

【讨论】:

  • 您好,谢谢您的回答。我试过这个,但它在Phonegap上并没有真正起作用。 Phonegap 也有一个 Javascript 示例(也在 Stack Overflow 中),但只要我打开一个 InAppBrowser 实例,它就不起作用。
  • 哦,对,它不应该工作,因为 Javascript 是用于 PhoneGap 应用程序的方式。你尝试过这样的事情吗? function onDeviceReady(){ document.addEventListener("backbutton", onBackKeyDown, false); } 或者 this answer 可以提供帮助。其实我对PhoneGap还不是很了解,但我会尽力帮助你...
  • @LeonardZelig 如果您编辑问题以分享您的代码,这可能会有所帮助:) 好吧,我想我发现了一些有趣的东西 herethere 但它绝不是关于处理后退按钮在 Inapp 浏览器中。也许根本不可能……
  • 嗨@T_D,感谢您的努力。我能得到的最接近的是您发布的事件侦听器,但如上所述,它也不起作用。不过,很高兴看到下一个 PhoneGap 版本是否会有任何新内容。
  • 我相信解决方案是它还不可能,所以回答接受:)
【解决方案6】:

使用 jQuery 移动端:

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

【讨论】:

  • 嘿 Marcin,谢谢,但它似乎也不适用于 InAppBrowser。
【解决方案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();
            });

【讨论】:

    【解决方案8】:

    据我所知,无法从 inAppBrowser 覆盖或检测后退按钮。当您按下返回按钮时,inAppBrowser 将隐藏并将控制权返回给 Phonegap 页面。您可以通过窗口上的focus 事件(使用 jQuery)来捕捉这一点,例如

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

    重新打开浏览器。然后,如果您愿意,可以使用 browser.executeScript() 向浏览器中加载的 web 应用发出信号。

    灵感来自this forum post

    【讨论】:

      【解决方案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>

      希望对您有所帮助。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-10-26
        • 2012-09-02
        • 2013-04-22
        • 1970-01-01
        • 1970-01-01
        • 2011-04-02
        • 2017-06-20
        • 1970-01-01
        相关资源
        最近更新 更多