Javascript jQuery - HTML 中的脚本标签被 jQuery 解析而不执行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2699320/
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
jQuery - script tags in the HTML are parsed out by jQuery and not executed
提问by Jose Jose
I have an HTML page like so:
我有一个像这样的 HTML 页面：
<html>
<body>
<div id='something'>
...
<script>
var x = 'hello world';
</script>
...
</div>
</body>
</html>
On another page, I am doing this:
在另一个页面上，我这样做：
$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
$('#mydiv').html($(data).find('#something').html());
alert(x);
}
});
jQuery, however, is not executing the javascript in the first file, even though the documentation says it does. How can I make it do that?
然而，jQuery 并没有在第一个文件中执行 javascript，即使文档说它会执行。我怎样才能让它这样做？
EDIT: Unfortunately in the real world application I am working on I don't have control over what the "included" page has. We are on the same domain, but I can't modify the code that it outputs as it is a packaged product our IT department will not let us modify.
编辑：不幸的是，在我正在处理的现实世界应用程序中，我无法控制“包含”页面的内容。我们在同一个域中，但我无法修改它输出的代码，因为它是我们 IT 部门不允许我们修改的打包产品。
回答by James
As Pointy pointedout (excuse the pun), jQuery messes with the SCRIPT tags when you pass HTML to $(). It doesn't remove them though -- it simply adds them to the DOM collection produced from your HTML. You can execute the scripts like so:
正如 Pointy指出的（请原谅双关语），当您将 HTML 传递给$(). 但是它并没有删除它们——它只是将它们添加到从您的 HTML 生成的 DOM 集合中。您可以像这样执行脚本：
$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
var dom = $(data);
$('#mydiv').html(dom.find('#something').html());
dom.filter('script').each(function(){
$.globalEval(this.text || this.textContent || this.innerHTML || '');
});
}
});
回答by guari
As alternative to @James answer, the HTML string can be parsed with $.parseHTML(), by paying attention to add the boolean flag that includes the scripts to true:
作为@James 答案的替代方法，可以使用 解析 HTML 字符串$.parseHTML()，注意将包含脚本的布尔标志添加到true：
$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
var content = $($.parseHTML(data, document, true)).find('#something');
$('#mydiv').html(content);
}
});
in this way any scripts embedded in the downloaded text can be executed.
通过这种方式，可以执行嵌入在下载文本中的任何脚本。
回答by Pointy
I'm not totally sure about this, but it's possible that what's happening is that when jQuery builds up the fragment from $(data), the script tags are lost at that point.
我对此并不完全确定，但有可能发生的情况是，当 jQuery 从 构建片段时$(data)，脚本标签在那时丢失了。
If you can arrange for the included page to really be just a fragment:
如果您可以将包含的页面安排为真的只是一个片段：
<div id='something'>
<!-- ... -->
<script>var x = 'hello world';</script>
</div>
without any other surrounding stuff, then your success callback can do this:
没有任何其他周围的东西，那么你的成功回调可以做到这一点：
success: function(data) {
$('#mydiv').html(data);
}
Now those script tags will be noticed by the jQuery html()function, which explicitly looks for them and strips them out. It does however hold onto those script blocks, and it executes them after it finishes updating the target contents.
现在这些脚本标签会被 jQueryhtml()函数注意到，它会显式地查找它们并将它们去除。然而，它确实保留了这些脚本块，并在完成更新目标内容后执行它们。
回答by xiaoyifang
Solution 1:the server return exact content
方案一：服务器返回准确内容
$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
$('#mydiv').html(data);
}
});
Solution 2:use innerHTML
解决方案2：使用innerHTML
$.ajax({
url: 'example.html',
type: 'GET',
success: function(data) {
var dom = $(data);
$('#mydiv').html(dom.find('#something')[0].innerHTML);
}
});
回答by James Wiseman
I expect the first page is executing the JavaScript, however this is not accessible from the second page, so alert(x)will not work
我希望第一页正在执行 JavaScript，但是这不能从第二页访问，所以alert(x)不会工作
If you want xreturned, you'll have to output it to the AJAX response.
如果要x返回，则必须将其输出到 AJAX 响应。
