2

这是一个有趣的问题，我想听听您对此的所有意见。

一个 jQuery ajax 调用会去除以下标签：

 <html>, <head>, <body> etc.

您无法通过数据访问它们。例如：

 $.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     $(data).find('body'); //would be undefined
   }
 });

您也不能访问这些元素中的第一个子元素。例如：

 <body>
    <div id="cantTouchThis"> <!-- Not found -->
       <div class="orThis"></div>
    </div>
 </body>

我在网上读到 parseHTML (jQuery 1.8+) 可以解决这个问题。这没关系，但是如果用户不能使用高于 1.7.0 的 jQuery 怎么办？

我已经阅读了许多解决方案，说在 body 标签周围或其内部的额外元素也有效。我觉得这种方法不是很好，因为您添加了额外的 HTML。

我还看到人们在这些元素上使用正则表达式/替换。这更好，但对 HTML 仍然有相同的影响。

最后，我知道了过滤器的解决方案。如果您知道确切的元素，这没关系，但如果您不知道，则可能会使用另一个元素。如果不是孩子，过滤器将无法找到它：

 $(data).filter(‘#cantTouchThis'); //Found
 $(data).filter(‘.orThis'); //Not found

一个有趣的解决方案是createDocumentFragment()。在此页面上的某处阅读有关它的更多信息：http ://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ 。

这种类型的编码旨在提高网站性能。上面的网站上有一个很好的例子。

从这里我读到你可以这样做：

 $.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     var data = $(data),
         frag = document.createDocumentFragment();

    frag.appendChild($data[0]); //appends nothing
    $(frag).find('#cantTouchThis'); //finds nothing
   }
 });

但是这不起作用：如何过滤 body html 从 ajax 返回的数据？

然后我进一步看了一下。

 $.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     var data = $(data),
         frag = document.createDocumentFragment(),
         $frag;

    for (var i = 0; i < $data.length; i += 1) {
       frag.appendChild($data[i]); //Appends the data to the fragment
    }
    $frag = $(frag);
    $frag.find('#cantTouchThis'); //still finds nothing, find does not work
    $frag.children('#cantTouchThis'); //finds it
    $frag.children('.orThis'); // not found
    $frag.children('#cantTouchThis').find('.orThis'); //finds it
   }
 });

最后我稍微扩展了一下：

$.ajax({
   async: 'false',
   dataType: 'html',
   type 'GET',
   url: '/hello.html',
   success: function (data) {
     var data = $(data),
         frag = document.createDocumentFragment(),
         $frag,
         $dataWrap = document.createElement('div'); //Create a div

    $dataWrap.setAttribute('id', 'ajaxContent'); //set an attr
    frag.appendChild($dataWrap); //append it into the dataWrap

    for (var i = 0; i < $data.length; i += 1) {
       frag.getElementById('ajaxContent').appendChild($data[i]); //Appends the data to the fragment child
    }
    $frag = $(frag).children(); //Targets ajaxContent and then you can target everything else
    $frag.find('#cantTouchThis'); //finds it 
    $frag.find('.orThis'); //finds it this time!
   }
 });

这种方法不好吗？JS 有点重，我不确定这是一个好的解决方案。这会使其运行速度变慢（用于数据循环）还是有助于加快速度。

有没有一种方法可以在不更新 jQuery 的情况下访问 body 标签。

我很好奇大家的看法。我希望我没有错过任何东西。

编辑：

事实证明，Internet Explorer 不喜欢片段本身的 getElementById。

您可以使用以下方法解决此问题：

  for (var i = 0; i < $data.length; i += 1) {
       frag.firstChild.appendChild($data[i]); //firstChild works
    }

感谢您阅读本文。

4

0 回答 0