JavaScript弹窗在Instagram内嵌Android WebView中无法正常关闭的问题

问题背景 #

通过window.open("/Home/Agreement", "_blank")打开协议新标签页，用window.close()按钮关闭在桌面/独立移动端浏览器正常，但在Instagram内嵌WebView中按钮无响应；按手机返回键会导致主页面刷新，丢失表单输入内容。

解决方案 #

1. 检测WebView环境，替换关闭逻辑 #

Instagram内嵌WebView会在navigator.userAgent中包含"Instagram"标识，针对这种环境，放弃window.close()，改用跨页面消息通信+本地存储的方案：

主页面代码

// 监听协议页的返回消息
window.addEventListener('message', (event) => {
  if (event.data === 'returnToHome') {
    window.focus();
    // 从localStorage恢复表单内容
    const savedForm = localStorage.getItem('userFormData');
    if (savedForm) {
      const formData = JSON.parse(savedForm);
      // 填充表单字段，示例：
      // document.getElementById('username').value = formData.username;
      // document.getElementById('email').value = formData.email;
    }
  }
});

// 实时保存表单输入到localStorage
const userForm = document.getElementById('your-form-id');
userForm.addEventListener('input', () => {
  const formData = {
    username: userForm.username.value,
    email: userForm.email.value
    // 补充其他表单字段
  };
  localStorage.setItem('userFormData', JSON.stringify(formData));
});

协议页按钮代码

<button class="btn btn-primary btn-block" onclick="handleReturn()">
 返回首页
</button>
<script>
function handleReturn() {
  const isInstagramWebView = navigator.userAgent.includes('Instagram');
  if (isInstagramWebView) {
    // 向主页面发送返回消息
    window.opener?.postMessage('returnToHome', window.location.origin);
    // WebView中无法关闭标签页，直接跳转回主页面
    window.location.href = '/Home';
  } else {
    // 常规环境下关闭标签页
    window.close();
  }
}
</script>

2. 拦截返回键，避免主页面刷新 #

通过监听popstate事件阻止默认刷新行为，并恢复表单内容：

window.addEventListener('popstate', (event) => {
  event.preventDefault();
  // 恢复表单内容
  const savedForm = localStorage.getItem('userFormData');
  if (savedForm) {
    const formData = JSON.parse(savedForm);
    // 填充表单字段
  }
});

// 页面加载时自动恢复表单
window.addEventListener('load', () => {
  const savedForm = localStorage.getItem('userFormData');
  if (savedForm) {
    const formData = JSON.parse(savedForm);
    // 填充表单字段
  }
});

3. 最优替代方案：用模态框代替新标签页 #

彻底规避WebView对新标签页的兼容性问题，将协议内容做成页面内的模态框（以Bootstrap为例）：

<!-- 主页面打开协议按钮 -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#agreementModal">
  查看用户协议
</button>

<!-- 协议模态框 -->
<div class="modal fade" id="agreementModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">用户协议</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- 协议内容 -->
        <p>这里放置用户协议全文...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">返回首页</button>
      </div>
    </div>
  </div>
</div>

这种方案无需处理跨标签页通信，在所有环境下都能稳定工作，且不会出现返回键刷新丢失内容的问题。

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