防止使用 JavaScript 刷新/重新加载页面答案

【问题标题】：Prevent refreshing / reloading a page with JavaScript防止使用 JavaScript 刷新/重新加载页面
【发布时间】：2011-12-14 10:09:35
【问题描述】：

我知道不推荐这样做，但我需要它，因为我在页面内有一个包含实际内容的 iframe，我希望当用户点击刷新按钮时，iframe 不会重新加载整个页面。

我知道我必须打电话给onunload / onbeforeunload 事件，但我不想问我是否要离开窗口，只是不要。

这可能吗？我已经处理了 F5 键，但我也喜欢防止从按钮刷新。

标签： javascript event-handling refresh

【解决方案1】：

更新：我在 5 年前写了这篇文章，现在浏览器做了不同的事情，你仍然可以用它来测试你的浏览器集，但你的经验可能与我以前的研究有所不同。

因为我很懒，所以尝试使用 jQuery。

理论上，阻止默认行为应该会阻止事件执行它应该执行的任何操作。它不适用于我示例中的事件，并且在不同的浏览器中具有不同的结果。我将 Math.random() 放入以确定页面是否已重新加载。因为不同的浏览器做不同的事情，我强烈建议不要在生产环境中使用它。

<body>
<p></p>
<script type="text/javascript">
    $('p').append(Math.random());

    $(window).bind({
        beforeunload: function(ev) {
            ev.preventDefault();
        },
        unload: function(ev) {
            ev.preventDefault();
        }
    });
</script>
</body>

使用 CTRL-R 或 F5 或重新加载按钮：

Safari：什么都不做
Chrome：什么都不做
Opera 10 和 11：什么都不做
Firefox 7.x：显示带有两个按钮的特殊提示：
- 留在页面上 - 不重新加载页面
- 离开页面 - 重新加载页面
IE7 和 IE8：显示带有两个按钮的提示：
- OK - 重新加载页面
- 取消 - 不重新加载页面
IE9：显示带有两个按钮的提示：
- 离开此页面 - 重新加载
- 留在此页面 - 不会重新加载

Firefox 提示（你可以看出我在 Mac 上测试过）

IE7 & IE8 提示

IE9 提示

结束：

是的，我没有测试 IE6，我删除了安装了它的 VM，我没有安装 IE10 beta 的 VM，所以你也不走运。

您也可以尝试使用 cancelBubble 和 stopPropagation 或者返回 false；可能会揭示一些有用的东西。我不同意 Jordan 的回复，即您不应该尝试覆盖默认值，所以我在这里结束我的实验。

【讨论】：

在 MDN 上阅读此文章 preventDefault() developer.mozilla.org/en/DOM/event.preventDefault
我尝试在 jsfiddle.net 中使用 jquery，而 chrome 中的刷新按钮似乎并不关心该 jquery 代码 ....
我写的时候它在 Chrome 中不起作用。这应该适用于各种浏览器。 code-maven.com/prevent-leaving-the-page-using-plain-javascript

【解决方案2】：

在 onsubmit 事件中返回 false 可防止表单被提交并保持在同一页面中而无需任何用户交互。..

例如..

当具有输入字段的表单为空并提交此 javascript 检查以进行验证并相应地返回时.. 如果返回 false 则不做任何事情（即页面不刷新或重定向）..

如果验证成功并且返回 true，则执行表单操作..

function validateForm(Str) {
mystring=document.getElementById('inputid').value; 
  if(!mystring.match(/\S/)){
    alert ('Please Enter a String.Field cannot be empty');
  return false;
  }else{
    return true;
  }
}

【讨论】：