如何在离子的inAppBrowser内的后退按钮上添加确认弹出窗口

Posted 2023-05-06

【中文标题】如何在离子的inAppBrowser内的后退按钮上添加确认弹出窗口

【英文标题】：How to add confirmation popup on back button inside inAppBrowser in ionic

【发布时间】：2021-09-27 00:46:49

【问题描述】：

我添加了一个 inAppBrowser，现在进入浏览器后，

期望：如果我点击硬件返回按钮，我想显示一个带有选项离开页面和取消的确认弹出窗口

实际：正在调用 Exit 事件并关闭 inAppBrowser

在我的 x.ts 文件中：

this.inAppBrowser.on('exit').subscribe(
    () => 
      this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
      console.log('orientation after browser close: ' + this.screenOrientation.type);
    
  );

我的问题是，我们是否有任何方法或解决方法来检测后退按钮点击而不是退出？

【问题讨论】：

使用platform.hardwarebackbutton()。检查平台文档。

没有检测到inAppBrowser的后退按钮事件

【参考方案1】：

根据documentation插件对于硬件后退按钮有自己的逻辑：

hardwareback：设置为 yes 以使用硬件后退按钮进行导航 回溯 InAppBrowser 的历史。如果没有以前的 页面，InAppBrowser 将关闭。默认值为yes，所以你 如果您希望后退按钮简单地关闭 InAppBrowser。

所以，答案 - 不。您无法在 Ionic 应用程序中设置后退按钮的逻辑。但是你可以 fork 这个插件，实现这个功能并使用它。

【参考方案2】：

我建议创建一个专用页面，您可以在其中打开 inappbrowser (ngOnInit)。此页面应该是全屏显示“您确定要退出吗？”的问题。和 2 个按钮“是”/“否”。如果用户按“是”退出应用程序，如果用户按“否”重新打开应用程序浏览器。这样，如果 inappbrowser 关闭，它将显示专用页面，作为您的确认按钮...

抱歉，代码不起作用。

编辑

this.platform.backButton.subscribeWithPriority(100, () => 
    if (window.confirm('Are you sure you want to exit, amigo?'))
      navigator['app'].exitApp();
    
);

【讨论】：

在哪里添加这个？在 app.ts 或 page.ts 中？