jQuery 评估 HTML 字符串中的 JavaScript，但很复杂

Question

这让我发疯...

我想做的是更新网页的一部分，并且出于不值得解释的原因，该请求要求一个全新的 HTML 页面（包括其头部），然后仅提取包含在指定元素（由 ID 标识）内的 HTML。

最初，我有以下 JavaScript 代码，每当对新 HTML 的 AJAX 请求完成时，该代码都会运行：

var $newContent = $(newHtmlContent);
loadingElement.innerHTML = $("#" + loadingElementId, $newContent).html();

这很棒，直到我加载了一些 HTML，该 HTML 包含在指定元素中，其中包含一些需要运行的脚本，所以我将其更改为：

var $newContent = $(newHtmlContent);
$(loadingElement).html($("#" + loadingElementId, $newContent).html());

我已读到 jQuery 将使用 html() 函数的 HTML 字符串参数评估任何脚本 - 然而，问题似乎是脚本在此调用之前被剥离。 浏览完 Firebug 后，似乎发生了以下情况：

$(newHtmlContent) // includes all 'script' elements
$("#" + loadingElementId, $newContent) // has no scripts
$("script", $newContent) // empty jQuery object

有人有任何建议吗？ 提前致谢。

Answer 1

进行了 快速测试 (fiddle)，给出以下字符串标记：

<div id="root">
    <div>some dynamic content</div>
    <script type="text/javascript">alert("hello");</script>
    <div class="desiredElement">after script</div>
</div>

对象

> [0]: #root
> [1]: script

jQuery 将生成一个类似< 的 code>[0] 将包含 #root 中除脚本之外的所有 html，脚本被分成自己的对象。对于标记内的所有脚本来说似乎都是如此。

所以你可以这样做来运行脚本：

var $new = $(dynamicContent); // dynamicContent is string
var $desired = $new.find('.desiredElement');

$new.eq(1).appendTo('body'); // run the script

Answer 2

编辑没关系；我想你已经沉没在这里了。一旦您将内容移交给 jQuery，我就很确定您的脚本已被删除。如果“newContent”实际上是“本机”页面的一部分，下面的技巧就会起作用，但因为它位于由 jQuery 实例化的片段中，所以为时已晚。

<罢工>
我认为这会起作用，但我承认我还没有尝试过像你所拥有的那样加载文档：

$('#loadingElement').html($('#' + loadingElementId, $newContent)[0].innerHTML);

这个想法是在拉出时绕过 jQuery加载部分的内容。

Answer 3

这里有一个关于这个问题的长解释： http://forum.jquery.com/topic/jquery-removing-script-tags-from-html-string-when-using-html

从该讨论中：

如果你想选择/遍历HTML字符串的一部分，并且希望执行HTML字符串中的

所以看起来问题在于您试图从返回的 HTML 中提取元素，而不先将其插入到 DOM 中。两种可能的解决方案：

1. 将整个返回的 HTML 插入到 DOM 中。脚本标签将执行。然后删除不需要的部分。这并不理想，因为它可能会显示您不想要的内容，除非您先隐藏 loadingElement 并在完成后显示。

2. 从$(newHtmlContent)中提取脚本URL，使用$.getScript()检索并执行每个URL，然后添加将检索到的元素放入 DOM 中。这比较麻烦，但应该可以正常工作，而且您不必将不必要的内容插入到 DOM 中。

Answer 4

您可以尝试的一件事是取出包含的

Answer 5

我也在这里猜测，但是怎么样：

//scripts will be executed and HTML put into loadingElement
$('#loadingElement').html(newHtmlContent); 

//find the specified element under #loadingElement, get it's HTML 
//and set it as the HTML for #loadingElement
$('#loadingElement').html($('#loadingElement').find('#idToFind').html());