Question

我有：

$('body').data('data1', '<script type="text/javascript">console.debug('execute');</script><div>example</div>');

和

<div id="content"></div>

当我这样做时：

$(document).ready(function () {
    $('#content').html($('body').data('data1'));
});

然后执行JavaScript。如何防止执行？有可能吗？

Answer 1

您必须从HTML字符串中删除script标记。

var p = new DOMParser(),
    doc = p.parseFromString("<html><body>...</body></html>", "text/xml");
$('script', doc).remove();

这适用于Firefox / Chrome，但我不了解其他浏览器。请注意，这只适用于格式正确的（x）html。

编辑：如果你也想要JS，你可以修改以前的代码：

var scripts = [];
$('script', doc).remove().each(function() {
  scripts.push($(this).html());
});

请注意，您甚至不必删除script标记。既然响应在单独的DOM文档中，它就不会弄乱你自己的脚本，并且你可以使用简单的$('selector', doc) jQuery访问你需要的任何内容。

Answer 2

您要停止执行脚本的唯一方法是将其从数据中删除。原型框架使用如下的正则表达式执行此操作：

  <script[^>]*>([\\S\\s]*?)<\/script>

Answer 3

考虑一种中和JavaScript包含的替代方法。下面是一个简单的函数，用于准备要添加到文档中的html：

function preventJS(html) {
   return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" ');
}

使用方法：

$("#content").append(preventJS("<span>Hello 1<script type='text/javascript'>alert('Hello 1!');<\/script></span>"));

这里详细描述 - JavaScript: How to prevent execution of JavaScript within a html being added to the DOM。我在Chrome，IE和FireFox中测试过。我希望它也适合你。