Javascript 通过ajax加载html页面时，是否会加载script标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2203762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When loading an html page via ajax, will script tags be loaded?
提问by pixeline
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 case of jquery 's ajax() function?
当您使用 AJAX 加载 html 文档时，它对 HEAD 标签内的节点有什么作用：(script,link,style,meta,title) 忽略它们或加载并解析它们？在 jquery 的 ajax() 函数的情况下？
回答by Daniel Vassallo
When you call the jQuery.ajax()method, you can specify the dataTypeproperty, which describes what kind of data you are expecting from the server, and how to handle it once it is received.
当您调用该jQuery.ajax()方法时，您可以指定该dataType属性，该属性描述了您期望从服务器获得什么样的数据，以及一旦收到该数据如何处理。
By default, jQuery will try to guess the dataTypebased on the MIME type of the response. However you can explicitly specify a dataType from the following:
默认情况下，jQuery 会尝试dataType根据响应的 MIME 类型猜测。但是，您可以从以下内容中明确指定数据类型：
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.
html: 以纯文本形式返回 HTML；包含的脚本标签在插入 DOM 时进行评估。
text：纯文本字符串。
xml: 返回一个可以通过 jQuery 处理的 XML 文档。
script：将响应作为 JavaScript 进行评估并将其作为纯文本返回。除非使用选项“缓存”，否则禁用缓存。
json：将响应评估为 JSON 并返回一个 JavaScript 对象。
jsonp：使用 JSONP 加载到 JSON 块中。会添加一个额外的“?callback=?” 到 URL 的末尾以指定回调。
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 调用将数据作为纯文本字符串返回，而不执行脚本或操作 DOM：
$.ajax({
url: 'ajax/test.html',
dataType: 'text',
success: function(data) {
alert(data);
}
});
回答by bobince
when you load an html document using AJAX, what does it do with the nodes inside the HEAD tag: (script,link,style,meta,title)
当您使用 AJAX 加载 html 文档时，它对 HEAD 标签内的节点有什么作用：（脚本、链接、样式、元、标题）
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?
这取决于你如何加载。ajax()（与它所基于的 XMLHttpRequest 一样）本身只是给你一个字符串。你是如何把它写进文件的？
If you write that string to the innerHTMLof an element, scripts inside it won't be executed. This is not standardised anywhere but all currently popular browsers behave this way.
如果将该字符串写入innerHTML元素的 ，则不会执行其中的脚本。这在任何地方都没有标准化，但所有当前流行的浏览器都以这种方式运行。
However, if you then insert that element into the document (whether it was already inside the document before or not), it willbe 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 anyelement, whether in the document or not.
但是，如果然后插入元素到文档（无论是已经在文档中之前或没有），它会在许多浏览器执行，你第一次做到这一点。在 IE 中，当您直接将脚本元素插入任何元素时，无论是否在文档中，都会执行脚本。
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 evalonly if absolutely necessary) to pass scripting data to them.
这都是非常不一致和不方便的，这就是为什么您应该避免<script>在文档中加载 AJAX元素的原因。无论如何，通常没有充分的理由；最好保持您的脚本代码静态，并使用 JSON（或eval仅在绝对必要时）将脚本数据传递给它们。
jQuery's loadfunction 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.
load当 AJAX 将内容加载到文档中时，jQuery 的函数会尝试补偿浏览器的差异。它未能捕捉到所有涉及的情况<script>（有一些非常奇怪的情况）。一般来说，你不应该依赖它。您可以避免获取 HTML 页面响应，然后只加载特定元素而没有<script>输入，因为这只会执行写入到 innerHTML 的步骤。但同样，你真的不想依赖这个。让服务器返回您的脚本可以直接使用的 HTML 或 JSON 片段要好得多。
As for stylesheets and stylesheet links, inserting them into the body does generally work, though by HTML's terms it probably shouldn't. metaand titlewon't do anything, it's too late for them to have an effect. Just parsing them using innerHTMLwon't do anything, but still, avoid it if you can.
至于样式表和样式表链接，将它们插入正文通常是有效的，但根据 HTML 的术语，它可能不应该。meta并且title不会做任何事情，对他们来说已经太晚了。仅使用解析它们innerHTML不会做任何事情，但是，如果可以，请避免它。
回答by G-Wiz
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.
当你说“加载”时，我理解它仅仅意味着调用 XHR（或 $.ajax 或 $.get 等）从 Web 服务器中提取 XML、JSON 或文本资源，将其存储在浏览器的 JS 运行时内存中，并获得对它的引用。对于 HTML 资源，单独操作不会解析任何内容。
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.
但是，如果您将该 HTML 注入到 DOM 中（至少在 Firefox 3.5 中），那么它将被解释。例如，假设您有以下三个非常专业的文件。
barf1.html:
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:
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:
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.
当您导航到 barf1.html 时，页面内容将发生变化，您将看到两个 JavaScript 警报，表明内联脚本块和外部脚本文件都被解释了。
回答by Luca Matteis
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.
HTML 可以通过使用 innerHTML 或通过 DOM 操作加载。在这两种情况下，如果 HTML 包含<script>标签，它们将不会被解释。
You can however go through the <script>tags inside the Ajaxed HTML content, and eval()it, if you really need to.
但是，您可以浏览<script>Ajaxed HTML 内容中的标签eval()，如果您确实需要的话。
If you use this type of <script src="http://site/script.js"></script>script tag, however, it will be interpreted.
<script src="http://site/script.js"></script>但是，如果您使用这种类型的脚本标记，它将被解释。
回答by mlennox
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?
我在这里假设您正在使用 AJAX 加载整个页面 - 我不确定您为什么要这样做？也许你可以给我们更多的信息，我们可以提出一些建议？
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.
为了更直接地解决您的问题 - 通常，重新加载的内容所需的任何脚本不应随内容一起重新加载，而应随页面一起重新加载。这样您就可以安排从您的 AJAX 重新附加事件处理程序等进行回调。
