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

问题描述

我通过 $加载页面的ajax（）和插入的部分的到页面的相应部分：

I'm loading a page via $.ajax() and inserting parts of the result into the corresponding parts of the page:

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

工程就像一个魅力，但我碰到的一个问题。

Works like a charm, but I've run into a problem.

现在我的网页含有一定的时候，结果是取出并插入执行某些特定页面的JS。据我所知，jQuery将不会返回剧本元素，如果你构建从反对HTML文本和查询的jQuery（我的证明）。所以，我没有办法选择通过jQuery只插入我想要的脚本。

Now my pages contain some page-specific JS which must be executed when the result is fetched and inserted. As far as I can tell, jQuery won't return script elements if you construct a jQuery object from HTML text and query against it (I've made a fiddle to demonstrate). So, I have no way of selectively inserting only the scripts I want via jQuery.

因此​​，它似乎是我得拉脚本响应元素中的文本自己。从本质上讲，我正在寻找正确的方式来做到这一点。以下是我想出了至今：

So it would seem that I've got to pull the script elements from response text myself. Essentially, I'm looking for the right way to do this. Here's what I came up with so far:

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等基本功能，只是为了避免它的特点之一（特别剧本处理）。正如在小提琴中可以看出，jQuery对象实际上并包含剧本 S，但它不会像 html的回报他们（ ）或获得（）。 我缺少做这个？

This works well enough, although I haven't tested it on any crappy browsers yet. Regardless, it feels uncomfortable to replicate such basic functionality of jQuery just to avoid one of its features (the special script handling). As can be seen in the fiddle, the jQuery object actually does contain the scripts, but it won't return them with something like .html() or .get(). Am I missing some obvious way of doing this?

注意：这整个主题将是毫无意义，一旦jQuery的内部 parseHTML 函数暴露的

Note: this whole topic will be moot once jQuery's internal parseHTML function is exposed

注2：我也看到了Trying从jQuery的阿贾克斯获得响应选择脚本代码但接受的答案是不能，其次是使用正则表达式。这两者是不能令人满意的的

Note 2: I've also read Trying to select script tags from a jQuery ajax get response however the accepted answer is "you can't" followed by "use a regex". Both of which are unsatisfactory

推荐答案

在jQuery的1.8.0b1，你现在可以使用 $。parseHTML（）方法，使该更轻松。

In jQuery 1.8.0b1, you can now use the $.parseHTML() method to make this easier.

$。parseHTML（xhr.responseText，真）会给你一个jQuery对象，包括脚本元素。然后，您可以提取脚本标记和追加或执行他们，你追加的HTML后。

$.parseHTML(xhr.responseText,true) will give you a jQuery object that includes script elements. You can then extract the script tags and append or execute them after you append the 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的按个别情况。这将取决于您加载的内容。

You may have to filter the scripts though to avoid double including jQuery on a case by case basis. It will depend on the content you are loading.

如果升级jQuery是不是一种选择，你可以只取 $的执行情况。parseHTML ，并把它作为一个插件到您当前的jQuery

If upgrading jQuery isn't an option, you could just take the implementation of $.parseHTML and include it as a plugin to your current 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);

这篇关于查询从HTML文本使用jQuery脚本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！