WebAPI中Document.visibilityState替代方案及iframe返回键监听问题

你的问题核心在于：原生App的返回键事件由App自身控制，不会必然触发visibilitychange事件（该事件仅在页面真正被隐藏/显示时触发，比如App退到后台）。以下是几种可行的实现方式：

1. 原生App侧主动触发JS回调（最可靠） #

让Android/iOS的原生开发同学在WebView捕获返回键时，直接调用iframe内的JavaScript方法。

• Android示例（Kotlin）：

  webView.evaluateJavascript("window.showExitDialog()", null)
  

• iOS示例（Swift）：

  webView.evaluateJavaScript("window.showExitDialog()") { result, error in
      // 处理结果
  }
  

你只需要在小程序中定义对应的方法：

window.showExitDialog = function() {
  if (confirm('确定要退出吗？')) {
    // 用户确认后，可通知原生执行返回逻辑
    // 比如通过JSBridge调用原生方法
  }
}

这种方式完全由原生控制返回键时机，兼容性和可靠性最高，但需要原生开发配合。

2. 监听popstate事件（依赖WebView历史栈） #

如果App的WebView使用浏览器历史栈管理页面（比如每次打开iframe都push一个历史记录），返回键会触发popstate事件，你可以拦截这个事件并弹窗：

// 先主动push一个空状态，确保popstate能被触发
history.pushState({page: 'current'}, '', window.location.href);

window.addEventListener('popstate', function(e) {
  e.preventDefault(); // 阻止默认返回行为
  if (confirm('确定要退出吗？')) {
    history.back(); // 用户确认后执行返回
  } else {
    // 取消返回，重新push状态维持历史栈
    history.pushState({page: 'current'}, '', window.location.href);
  }
});

注意：如果App不依赖浏览器历史栈管理页面（比如原生自己维护返回栈），这个方法会失效。

3. 监听beforeunload事件（低自定义弹窗） #

当页面即将被卸载时（比如返回键导致页面关闭），会触发beforeunload事件，可用于弹出确认提示，但弹窗样式由浏览器/WebView控制，无法自定义：

window.addEventListener('beforeunload', function(e) {
  const message = '确定要退出吗？';
  e.returnValue = message; // 兼容旧版浏览器
  return message;
});

部分App可能会绕过这个事件直接关闭页面，需要测试兼容性。

4. 父页面与iframe通信（父页面为Web场景） #

如果你的iframe嵌套在App内的Web页面中，可让父页面接收原生返回键事件后，通过postMessage通知iframe：

• 父页面代码：

  // 假设父页面已接收原生返回键回调
  function onNativeBackPressed() {
    const iframe = document.getElementById('your-iframe');
    iframe.contentWindow.postMessage('backPressed', '*');
  }
  

• iframe内代码：

  window.addEventListener('message', function(e) {
    if (e.data === 'backPressed') {
      if (confirm('确定要退出吗？')) {
        // 通知父页面或原生执行返回
      }
    }
  });
  

内容的提问来源于stack exchange，提问作者noobsee