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

Question

我正在通过 $.ajax() 加载页面并将结果的部分插入到页面的相应部分:

$.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 对象并对其进行查询(我已经 made a fiddle 来演示)。因此，我无法通过 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 处理)，这感觉很不舒服。从 fiddle 中可以看出，jQuery 对象实际上包含 script s，但它不会返回类似 .html() 的内容或.get() 。 我是否错过了一些明显的方法？

注意:一旦 jQuery 内部 parseHTML，整个主题将变得毫无意义。功能已公开

注 2:我还读过 Trying to select script tags from a jQuery ajax get response然而，接受的答案是“你不能”，然后是“使用正则表达式”。两者都不尽如人意

Answer 1

在 jQuery 1.8.0b1 中，您现在可以使用 $.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);