All geek questions in one place

.ready () starts after window.beforeunload

We have several places where we include inline <script>blocks that run code wrapped in $(document).ready(). Some of these blocks use methods that depend on other external scripts. During normal page execution, this technology works fine, but when a user navigates from a page to its full load, an event occurs $(document).ready()and IE throws errors "Object does not support this property or method"on the left and right.

After some testing, I found that the event window.beforeunloadfires before any of the events ready, so I would like to be able to prevent events from triggering readyat this point. Ideally, I would like to have a solution that generalizes, so I do not need to modify all of the inline code.

If this is not possible, would you suggest wrapping all the embedded code in blocks try-catch, determining if all external scripts were loaded before executing the embedded code, etc.?

+3
source share
2 answers

Finishing up with the following solution:

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

This is a little hacker than I would prefer, but he does his job.

+1
source

Embedded scripts should not be overflowed if plugins are loaded after the fact.

The best way, IMO, is to set up your pages as follows:

<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 this is not an option that you could (but probably shouldn't) (unverified 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>

, html5boilerplate.com.

+1

Source: https://habr.com/ru/post/1769145/

More articles:


All Articles