使用JavaScript阻止刷新/重新加载页面
[英]Prevent refreshing / reloading a page with JavaScript
问题描述
I know this is not recommended, but I need it because I have an iframe inside the page who has the actual content and I want that when the users hits refresh button, iframe reloads not entire page. 
我知道这不推荐，但我需要它，因为我在页面内部有一个iframe，其中包含实际内容，我希望当用户点击刷新按钮时，iframe不会重新加载整个页面。
I know I have to call onunload / onbeforeunload event, but I don't want to ask me if I want to leave the window, just don't. 我知道我必须调用onunload / onbeforeunload事件，但我不想问我是否要离开窗口，只是不要。
Is that possible? 那可能吗？ I've got handled the F5 key, but I like to prevent refreshing from button too. 我已经处理了F5键，但我也想阻止按钮刷新。
2 个解决方案
解决方案1
3 2011-11-03 21:49:34
UPDATE: I wrote this 5 years ago, browsers do different stuff now, you can still use this for testing your browser set, but your experience may vary from my old research. 更新：我5年前写过这个，浏览器现在做了不同的东西，你仍然可以用它来测试你的浏览器集，但你的经验可能与我以前的研究不同。
Experimenting using jQuery, because I'm lazy. 尝试使用jQuery，因为我很懒。
Theoretically, preventing the default behavior should stop the event from doing whatever it is supposed to do. 从理论上讲，防止默认行为应该阻止事件做任何应该做的事情。 It doesn't work with the events in my example and has different results in different browsers. 它不适用于我的示例中的事件，并且在不同的浏览器中具有不同的结果。 I put the Math.random() in to determine if the page has been reloaded or not. 我将Math.random（）放入以确定页面是否已重新加载。 Because different browsers do different things, I highly recommend NOT using this in a production environment. 因为不同的浏览器做不同的事情，我强烈建议不要在生产环境中使用它。
<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>
Using CTRL-R or F5 or Reload Button: 使用CTRL-R或F5或重新加载按钮：
- Safari: Does nothing Safari：什么都不做
- Chrome: Does nothing Chrome：什么都不做
- Opera 10 & 11: Does nothing Opera 10＆11：什么都不做
- Firefox 7.x: Shows a special prompt with two buttons: Firefox 7.x：显示带有两个按钮的特殊提示：
- Stay on Page - Does not reload page 留在页面 - 不重新加载页面
- Leave Page - Reloads the page 离开页面 - 重新加载页面
- Stay on Page - Does not reload page
- IE7 & IE8: Shows a prompt with two buttons: IE7和IE8：显示带有两个按钮的提示：
- OK - Reloads the page 确定 - 重新加载页面
- Cancel - Does not reload the page 取消 - 不重新加载页面
- OK - Reloads the page
- IE9: Shows a prompt with two buttons: IE9：显示带有两个按钮的提示：
- Leave this page - reloads 离开此页面 - 重新加载
- Stay on this page - does not reload 留在这个页面 - 不重新加载
- Leave this page - reloads
Firefox Prompt (you can tell I tested it on a Mac) Firefox提示（你可以告诉我在Mac上测试过它）
IE7 & IE8 Prompt IE7和IE8提示
IE9 Prompt IE9提示
In closing: 结束时：
Yes, I did not test IE6, I deleted my VM which had it installed, I don't have a VM with IE10 beta installed, so you're out of luck on that too. 是的，我没有测试IE6，我删除了安装了它的VM，我没有安装了IE10 beta的虚拟机，所以你也不幸。
You might also experiment with cancelBubble and stopPropagation or maybe return false; 您也可以尝试使用cancelBubble和stopPropagation，或者可能返回false; might reveal something useful. 可能会揭示有用的东西 I'm down with Jordan's reply that you shouldn't be trying to override the defaults, so I'm concluding my experiment here. 我对Jordan的答复感到失望，你不应该试图覆盖默认值，所以我在这里结束我的实验。
解决方案2
1 2013-02-19 05:47:22
Returning false in an onsubmit event prevents the form from being submitted and stays in the same page without any user interaction.. 在onsubmit事件中返回false会阻止表单被提交并保留在同一页面中而无需任何用户交互。
For example.. 例如..
when a form having input field is empty and submitted this javascript check for validation and returns accordingly.. If false is returned nothing is done(ie page is not refreshed or redirected).. 当具有输入字段的表单为空并提交此javascript检查以进行验证并相应返回时...如果返回false则不执行任何操作（即页面未刷新或重定向）。
If the validation is ok and if true is returned the form action is performed.. 如果验证正常，如果返回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;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.