在window.beforeunload之后触发.ready（）
[英].ready() triggered after window.beforeunload
问题描述
We have a few places where we include inline <script> blocks which run code, wrapped by $(document).ready() . 
我们有几个地方包含内联<script>块，它们运行代码，由$(document).ready()包装。 Several of these blocks use methods dependent on other external scripts. 其中一些块使用依赖于其他外部脚本的方法。 During normal page execution this technique works fine, but when the user navigates away from the page before it's completely loaded, the $(document).ready() event is triggered and IE is throwing "Object does not support this property or method" errors left and right. 在正常页面执行期间，此技术可以正常工作，但是当用户在完全加载之前导航离开页面时，会触发$(document).ready()事件并且IE正在抛出"Object does not support this property or method"错误左和右。
Through some testing I've found out that the window.beforeunload event is triggered before any of the ready events, so I'd like to be able to prevent the ready events from being triggered at that point. 通过一些测试，我发现window.beforeunload事件在任何ready事件之前被触发，所以我希望能够防止在那时触发ready事件。 Ideally I'd like to have a solution that generalizes so I don't have to modify all of the inline code. 理想情况下，我希望有一个概括的解决方案，所以我不必修改所有的内联代码。
If that's not possible would you suggest wrapping all of the inline code in try-catch blocks, determining if all the external scripts have been loaded before executing the inline code, etc? 如果不可能，您是否建议将所有内联代码包装在try-catch块中，确定在执行内联代码之前是否已加载所有外部脚本等？
2 个解决方案
解决方案1
1 2010-10-12 19:01:04
The inline scripts should not be peppered throughout like that if the plugins are loaded after the fact. 内联脚本不应该像在插件事件之后加载一样。
A better way, IMO, is to set up your pages like this: 一个更好的方法，IMO，就是设置你的页面：
<html>
<head>
<title></title>
</head>
<body>
<div id="content">
</div>
<script src="jquery.js"></script>
<script src="jquery.customerPlugins.js"></script>
<script>
$(function(){
// all inline would go here!
});
</script>
<script src="main.js"></script>
</body>
</html>
But if that isn't an option you could (but probably shouldn't) (untested code below): 但如果这不是一个选项，你可以（但可能不应该）（下面未经测试的代码）：
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script>
var readyQueue = [];
</script>
</head>
<body>
<script>
readyQueue.push(function(){
$("body").append("<div />").customPlugin();
});
</script>
<div id="content">
<script>
readyQueue.push(function(){
$("#content").customPlugin();
});
</script>
</div>
<script src="jquery.customPlugins.js"></script>
<script>
// do something like this...
$(function(){
var fn;
while(fn = readyQueue.shift()){
fn();
}
// if you want to continue to use readyQueue in code
// below/after this you could do something like the following:
readyQueue = {"push": function(fn){
fn();
})};
// this would execute immediately:
readyQueue.push(function(){
alert('Hello');
});
});
</script>
<script src="main.js"></script>
</body>
</html>
While you're at it, check out html5boilerplate.com . 当你在这里时，请查看html5boilerplate.com 。
解决方案2
1 已采纳 2010-10-12 19:56:09
Ended up going with the following solution: 结束以下解决方案：
<script type="text/javascript">
window.onbeforeunload = function(){
$.readyList = null;
}
</script>
It's a little hackier than I would have preferred, but it gets the job done. 它比我想要的更有点hackier，但它完成了工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.