Question

我正在使用$.get()从远程服务器检索HTML代码段并将该代码段插入DOM。该代码段包含几个基本HTML元素和一个脚本元素。插入所有基本元素，但脚本元素不插入。

示例摘录

<p>This is a paragraph</p>
<script type="text/javascript">
// JavaScript that will work with the HTML in the snippet
</script>

通过查看Chrome网络检查器中检索到的资源，我已经验证了脚本元素位于检索到的代码段中。那么，为什么不$.get()插入脚本元素，是否可以做我想做的事情？

修改

为了澄清，我正在使用$.get()检索HTML代码段，并使用$().html(data)将其插入到DOM中。

Answer 1

应该插入脚本元素，就像静态内容一样 - 脚本不会执行。当您使用 html（）插入html时，它会映射到每个元素的 innerHTML 属性。从历史上看，浏览器不执行以这种方式插入的脚本元素（IE in certain circumstances除外）。

这也反映在HTML 5规范草案中的definition of innerHTML中：

注意：使用innerHTML插入的脚本元素在插入时不会执行。

如果要执行脚本，可以查找元素和 eval（）其文本，或者从文本中创建一个新的脚本元素并将其正确插入到DOM中。

Answer 2

当您执行此操作时，脚本元素不会绑定到文档。您需要自己插入脚本。

一种方法是调用一个回调函数来解析你的返回html并手动插入脚本。像这个： `

_insertScripts: function(html) {
        var sfrag = '<script[^>]*>([\\S\\s]*?)<\/script>';
        var matchAll = new RegExp(sfrag, 'img');
        var matchOne = new RegExp(sfrag, 'im');
        if(html.match(matchAll)) {
            $.map(html.match(matchAll), function(script) {
                eval( (script.match(matchOne) || ['', ''])[1] );
            });
        }
    }

`

我见过一些使用jQuery的live（）函数的解决方案，但我不确定它是如何工作的。

为什么jQuery的$ .get（）不会将脚本元素插入DOM？

2 个答案: