CODEWITHSUNDEEP
javascriptjqueryhtml
James Bailey
James Bailey

Reputation: 508

What's the best way to load a script from a file?

I have an application where I load a div via an ajax call, or with jquery 

$('#cont').load("something.html");

<div id="cont">
</div>

something.html looks like:

<script src="./js/test.js"></script>    
<table>
    .......blah....blah
</table>

I get: jquery-1.12.0.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I have been going into the test.js file and just cutting and pasting the script to the beginning of something.html but this is a lot of redundant script. Many pages uses it and it becomes a pain to maintain.

Is there a way I can keep script loaded this way in a separate .js file?

Upvotes: 0

Views: 672

Answers (3)

Barmar
Barmar

Reputation: 780723

When jQuery inserts HTML that contains <script> elements, it executes the scripts immediately. If it's a reference to an external script, it uses synchronous AJAX to load the script recursively, to emulate the way the browser loads scripts as it's loading an HTML file. This triggers the warning.

You could just ignore the warning, as synchronous AJAX isn't going away any time soon. But if you really want to get rid of it, you could split your load into two parts. Take the line that loads test.js out of something.html, and use:

$.getScript('./js/test.js', function() {
    $("#cont").load('something.html');
});

Upvotes: 3

user193130
user193130

Reputation: 8227

If synchronous execution is not necessary for the script, you could try:

<script src="./js/test.js" async="async"></script>    
<table>
    .......blah....blah
</table>

Doing this means that there's no guarantee that your script would execute before the following <table> is parsed and rendered. Setting the async attribute means this can happen in any order.

The HTML5 spec is here:

The async and defer attributes are boolean attributes that indicate how the script should be executed. The defer and async attributes must not be specified if the src attribute is not present.

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

Support is pretty good for modern browsers:

  • IE 10+
  • FF 3.6+
  • Chrome 8+
  • Safari 5.1+
  • Opera 15+

Upvotes: 1

Val
Val

Reputation: 2323

Try breaking this into two operations. In your page, load your JS script using a normal script element with a reference to an external JS file:

<script src="./js/test.js"></script>

Then, do an AJAX call to get your content and load that into the target div in the AJAX call's success handler. The easiest way to do that in jQuery is with $.get():

<script>
    $.get('/path/to/something.html', function(data) {
        // set the contents of #cont to the HTML returned from the AJAX call
        $('#cont').html(data);  
    });
</script>

Upvotes: 2

Related Questions