使用 jQuery 从 HTML 文本查询脚本元素

我正在通过以下方式加载页面$.ajax()并插入parts将结果放入页面的相应部分：

$.ajax({
  url: '/whole_page.html',
  success: function (data, status, xhr) {
    $result = $(xhr.responseText);
    $('#menu').html($('#menu', $result).html());
    $('#content').html($('#content', $result).html());
  }
});

就像一个魅力，但我遇到了一个问题。

现在我的页面包含一些特定于页面的 JS，在获取和插入结果时必须执行这些 JS。据我所知，jQuery 不会返回script元素，如果你从 HTML 文本构造一个 jQuery 对象并对其进行查询（我已经拉了一把小提琴 http://jsfiddle.net/kaen/rEWYz/5/展示）。因此，我无法通过 jQuery 有选择地仅插入我想要的脚本。

所以看来我必须拉script我自己回复文本中的元素。本质上，我正在寻找正确的方法来做到这一点。到目前为止我想到的是：

function pullScripts(text) {
  var frag = document.createDocumentFragment()
    , div = document.createElement('div')
    , scriptElements
    ;

  // This is roughly how jQuery finds the scripts when cleaning text
  frag.appendChild(div);
  div.innerHTML = text;

  scriptElements = div.getElementsByClassName('class-for-scripts-that-we-want');

  $('head').append(scriptElements);
}

尽管我还没有在任何蹩脚的浏览器上测试过它，但它的效果很好。无论如何，复制 jQuery 的基本功能只是为了避免其中一个功能（特殊的script处理）。从小提琴中可以看出，jQuery 对象实际上包含scripts，但它不会用类似的东西返回它们.html() or .get(). 我是否缺少一些明显的方法来做到这一点？

注意：一旦 jQuery 内部化，这整个话题就变得毫无意义了。parseHTML功能暴露

注2：我也读过尝试从 jQuery ajax 获取响应中选择脚本标签 https://stackoverflow.com/questions/4430707/trying-to-select-script-tags-from-a-jquery-ajax-get-response然而，接受的答案是“你不能”，然后是“使用正则表达式”。两者都不满意

在 jQuery 1.8.0b1 中，您现在可以使用$.parseHTML() https://api.jquery.com/jquery.parsehtml/方法使这变得更容易。

$.parseHTML(xhr.responseText,true)将为您提供一个包含脚本元素的 jQuery 对象。然后，您可以提取脚本标签并在附加 html 后附加或执行它们。

$.ajax({
  url: '/whole_page.html',
  success: function (data, status, xhr) {
    var $result = $.parseHTML(xhr.responseText,true),
        $scripts = $result.find("script").add($result.filter("script")).detach();

    $('#menu').html($('#menu', $result).html());
    $('#content').html($('#content', $result).html());
    $('head').append($scripts);
  }
});

您可能必须根据具体情况过滤脚本，以避免重复包含 jQuery。这将取决于您正在加载的内容。

如果升级 jQuery 不是一个选择，你可以采用以下实现$.parseHTML并将其作为插件包含到您当前的 jQuery 中

(function($) {
    if (!$.parseHTML) {
        var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
        // data: string of html
        // context (optional): If specified, the fragment will be created in this context, defaults to document
        // scripts (optional): If true, will include scripts passed in the html string
        $.parseHTML = function( data, context, scripts ) {
            var parsed;
            if ( !data || typeof data !== "string" ) {
                return null;
            }
            if ( typeof context === "boolean" ) {
                scripts = context;
                context = 0;
            }
            context = context || document;

            // Single tag
            if ( (parsed = rsingleTag.exec( data )) ) {
                return [ context.createElement( parsed[1] ) ];
            }

            parsed = jQuery.buildFragment( [ data ], context, scripts ? null : [] );
            return jQuery.merge( [],
                (parsed.cacheable ? jQuery.clone( parsed.fragment ) : parsed.fragment).childNodes );
        }
    }
})(jQuery);