When loading an html page via ajax, will script tags be loaded?

Solution 1:

When you call the jQuery.ajax() method, you can specify the dataType property, which describes what kind of data you are expecting from the server, and how to handle it once it is received.

By default, jQuery will try to guess the dataType based on the MIME type of the response. However you can explicitly specify a dataType from the following:

html: Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
text: A plain text string.
xml: Returns a XML document that can be processed via jQuery.
script: Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used.
json: Evaluates the response as JSON and returns a JavaScript object.
jsonp: Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.

As an example, the following ajax call will return the data as a plain text string, without executing the scripts or manipulating the DOM:

$.ajax({
  url: 'ajax/test.html',
  dataType: 'text',
  success: function(data) {
    alert(data);
  }
});

Solution 2:

when you load an html document using AJAX, what does it do with the nodes inside the HEAD tag: (script,link,style,meta,title)

That depends how you do the loading. ajax() (as with the XMLHttpRequest on which it is based) itself just gives you a string. How are you getting that into the document?

If you write that string to the innerHTML of an element, scripts inside it won't be executed. This is not standardised anywhere but all currently popular browsers behave this way.

However, if you then insert that element into the document (whether it was already inside the document before or not), it will be executed in many browsers, the first time you do it. In IE, the script will be executed when you directly insert a script element into any element, whether in the document or not.

This is all very inconsistent and inconvenient, which is why you should avoid AJAX-loading <script> elements in the document. There is not usually a good reason to anyway; better to keep your script code static, and use JSON (or eval only if absolutely necessary) to pass scripting data to them.

jQuery's load function attempts to compensate for the browser differences when AJAX-loading content into the document. It fails to catch all circumstances involving <script> (there are some really strange ones). You shouldn't rely on it, in general. You can get away with taking an HTML page response but then only loading specific element(s) with no <script> in, because that only does the writing-to-innerHTML step. But again, you don't really want to be relying on this. Much better to have the server return a snippet of HTML or JSON your scripts can use directly.

As for stylesheets and stylesheet links, inserting them into the body does generally work, though by HTML's terms it probably shouldn't. meta and title won't do anything, it's too late for them to have an effect. Just parsing them using innerHTML won't do anything, but still, avoid it if you can.

Solution 3:

When you say "load" I understand that to merely mean invoking XHR (or $.ajax or $.get etc) to pull down an XML, JSON, or text resource from a web server, store it in the browser's JS runtime memory, and get a reference to it. For HTML resources, that act alone doesn't parse anything.

However, if you take that HTML and inject it into the DOM (at least in Firefox 3.5), then it will be interpreted. For example, say you had the following three, very professional files.

barf1.html:

<html>
    <head>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(init);

            function init() {
                $.get('barf2.html', inject);
            }

            function inject(data) {
                debugger;
                $('body').html(data);
                //document.write(data);
            }
        </script>
    </head>
    <body>
        long live barf1!
    </body>
</html>

barf2.html:

<div>
    <script type="text/javascript">
        alert('barf2!');
    </script>
    <script type="text/javascript" src="barf3.js"></script>
    barf2 lives here now!
</div>

barf3.js:

alert('barf3!');

When you navigate to barf1.html, the page content will change, and you will see two JavaScript alerts, indicating that both inline script blocks and external script files are interpreted.

When loading an html page via ajax, will script tags be loaded?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts