Question

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

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

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

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

Answer 2

结束以下解决方案：

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

它比我更喜欢的有点讨厌，但它完成了工作。

在window.beforeunload之后触发.ready（）

2 个答案: