.ready() 在 window.beforeunload 之后触发答案

【问题标题】：.ready() triggered after window.beforeunload.ready() 在 window.beforeunload 之后触发
【发布时间】：2010-10-12 13:46:34
【问题描述】：

我们有一些地方包含内联 <script> 块，这些块运行代码，由 $(document).ready() 包装。其中一些块使用依赖于其他外部脚本的方法。在正常的页面执行过程中，这种技术可以正常工作，但是当用户在页面完全加载之前离开页面时，会触发 $(document).ready() 事件并且 IE 会左右抛出 "Object does not support this property or method" 错误。

通过一些测试，我发现window.beforeunload 事件在任何ready 事件之前触发，所以我希望能够防止ready 事件在那时被触发。理想情况下，我希望有一个通用的解决方案，这样我就不必修改所有内联代码。

如果这不可能，您是否建议将所有内联代码包装在 try-catch 块中，在执行内联代码之前确定是否已加载所有外部脚本等？

【问题讨论】：

您是否在 after jquery 和 before document.ready 调用之前加载您的 jquery 插件？
所以您要在onbeforeunload 处理程序中插入一个脚本文件？
可以在几天内升级到 jQuery 1.4.3 吗？它增加了延迟 ready 处理程序的能力。
@david - 在页面顶部加载 jQuery 库，在底部加载其他外部脚本，并且内嵌脚本贯穿始终
@jAndy - 目前在 onbeforeunload 处理程序中没有做任何事情，似乎是一个方便的地方来解决这个问题

标签： javascript jquery internet-explorer javascript-events

【解决方案1】：

如果插件是在事后加载的，那么内联脚本不应该像那样到处都是。

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>

但如果这不是一个选项，你可以（但可能不应该）（下面的未经测试的代码）：

<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>

当您使用它时，请查看html5boilerplate.com。

【讨论】：

绝对同意合并内联JS会更好。不幸的是，这是一个比我目前有时间做的更大的项目。
尝试第二个选项。它比实际代码更具概念验证（未经测试）。 [].push to push 函数技巧与大多数异步脚本的方法非常相似（谷歌分析类似）。

【解决方案2】：

最终采用以下解决方案：

<script type="text/javascript">
 window.onbeforeunload = function(){
  $.readyList = null;
 }
</script>

它比我希望的要复杂一些，但它可以完成工作。

【讨论】：

有用的技巧。 +1 以备将来使用 ;)