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

后端未结

关注

 5  1955

When you load an html document using AJAX, what does it do with the nodes inside the HEAD tag: (script,link,style,meta,title) ignore them or load and parse them? And in the

相关标签:

5条回答

梦毁少年i

2020-11-27 15:05
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);
  }
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2020-11-27 15:09
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
感动是毒

2020-11-27 15:13

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
醉话见心

2020-11-27 15:19

No they will not be interpreted.

HTML can be loaded either by using innerHTML, or by DOM manipulation. In both cases, if the HTML contains <script> tags, they will not be interpreted.

You can however go through the <script> tags inside the Ajaxed HTML content, and eval() it, if you really need to.

If you use this type of <script src="http://site/script.js"></script> script tag, however, it will be interpreted.

0 讨论(0)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2020-11-27 15:26

As has been pointed out, in general - no, script tags will not be interpreted.

I'm not at all sure what will happen with the other tags.

I'm making an assumption here that you are loading an entire page in AJAX - I'm not sure why you would want to do that? Maybe you could give us a bit more information and we could make some suggestions?

To address your question more directly - in general, any scripts required on the reloaded content should not be reloaded with the content but with the page. That way you can arrange to have a callback from your AJAX reattaches event handlers etc.

0 讨论(0)
发布评论:

提交评论
- 加载中...