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

Question

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

6

我知道这不是推荐的做法，但由于我页面中有一个包含实际内容的 iframe，当用户点击刷新按钮时，我希望 iframe 可以重新加载而不是整个页面。我知道我需要调用 onunload / onbeforeunload 事件，但我不想让它询问我是否要离开窗口，只是不刷新。这可能吗？我已经处理了 F5 键，但我还想防止通过按钮刷新。

- xuso

6

听起来（可悲的是）需要使用 onbeforeunload 事件。您可以使用它提示用户并询问他们是否想离开页面（刷新也算“离开”页面）。 - user1385191

8

您不能也不应该覆盖用户期望的浏览器行为。如果您需要在应用程序内具有与“刷新”按钮正常功能不同的“刷新”功能，则应在应用程序的UI中构建一个“刷新”按钮。这是非常常见的（例如，请参阅Gmail），而且用户将比您试图覆盖他们期望的浏览器行为更容易理解它。 - Jordan Running

@MattMcDonald 是的，我知道，但我不想询问用户，只需刷新 iframe 并取消刷新页面事件。 - xuso

@Jordan 嗯，这不是一个坏的选择。谢谢。以防万一，请期待更多评论。 - xuso

1

如果你觉得弹出广告很烦人，那么想象一下在一个可以抑制页面重定向的世界里会发生什么。 - hugomg

2个回答

1

在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;
  }
}

- Lucky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul J · Accepted Answer

更新：本文写于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：显示一个带有两个按钮的提示：
- 确定-重新加载页面
- 取消-不重新加载页面
IE9：显示一个带有两个按钮的提示：
- 离开此页-重新加载
- 留在此页-不重新加载

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

Firefox Prompt

IE7和IE8提示

IE7 & IE8 Prompt

IE9提示

IE9 Prompt

最后：

是的，我没有测试IE6，我删除了安装它的虚拟机，我没有安装IE10 beta的虚拟机，所以在这方面你是没有运气的。

您还可以尝试cancelBubble和stopPropagation或return false; 可能会显示一些有用的内容。我同意Jordan的回复，您不应该尝试覆盖默认设置，因此我在此结束我的实验。