如何为 Google Form iframe 禁用默认浏览器消息“您确定要离开此页面”？答案

【问题标题】：How to disable default browser message “are you sure you want to leave this page” for a Google Form iframe?如何为 Google Form iframe 禁用默认浏览器消息“您确定要离开此页面”？
【发布时间】：2017-09-08 12:00:58
【问题描述】：

我有一个 iframe 通过包含 Google 表单 URL 的引导模式隐藏。

<div class="modal fade" id="sugestaoPL" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">My Modal Title</h4>
           </div>
           <div class="modal-body">
              <iframe src="<?php echo ot_get_option('iframe_url'); ?>"></iframe>
           </div>
           <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

每次我尝试离开或重新加载页面时，浏览器都会提示我默认“您确定要离开此页面吗，未保存的更改将会丢失”消息，可能是因为我要使用 Google 表单离开页面原封不动。

由于在大多数用例中，我的用户不会让模式可见，因此不会使用 Google 表单，因此我想禁用此默认消息。我知道消息来自 Google 表单，因为如果我删除模态代码，浏览器消息就会消失。

我发现删除此默认行为的解决方案是添加一个

window.onbeforeunload = null

在我的代码中。我做到了。在关闭</body> 标记之前，我在$(document).ready(){} 内部和外部、头部和页脚中尝试过，并且没有任何替代方法阻止了此对话的出现。

恐怕那是因为它在 iframe 的内部。

如何消除此默认对话？

【问题讨论】：

您无法解决此问题。 iframe 不受您的控制。
我的建议是用图片替换 iframe。单击时，将图像替换为 iframe 并将其聚焦。这样 iframe 将不会实际加载，除非用户尝试将其聚焦。或者在显示模态之前不要构建模态的 html。
我做了一些不同的事情，但想法是一样的。谢谢。

标签： javascript google-chrome iframe

【解决方案1】：

很遗憾，我无法解决主要问题，但我找到了解决方法。正如here 指出的那样，这似乎是 Google 的表单问题。但是，链接中指出的解决方法对我不起作用。

这是有效的解决方法

jQuery(window).bind('beforeunload', function(){
    if(jQuery('.modal').is(':visible') === false){
        jQuery( ".modal" ).remove();
    }
});

它的作用是，如果在我试图离开页面时没有打开模式，则在页面加载之前从页面中删除 .modal 元素。这样iframe 也会被删除，“你确定要离开这个页面”就消失了。

【讨论】：

【解决方案2】：

   location.href = "javascript:(" + function() {
   window.onbeforeunload = null;
   window.onunload = null;
  } + ")()";

看看这个帖子 reference

【讨论】：

【解决方案3】：

如果你设置了 window.onbeforeunload = someFunction;你可以用 window.onbeforeunload = null 来取消它。

但是，如果您设置了 window.addEventListener('beforeunload',someFunction);，则无法使用 window.onbeforeunload = null 删除此事件侦听器。它只能用 removeEventListener('beforeunload',someFunction);

【讨论】：

这是不可能的.. 需要在 iframe 上运行，而您无权访问 iframe。