在ajax HTML响应中查找body标签

2018-05-30 16:39:00

我正在做一个Ajax调用来获取内容并附加这样的内容：

$(function(){
    var site = $('input').val();
    $.get('file.php', { site:site }, function(data){
        mas = $(data).find('a');
        mas.map(function(elem, index) {
            divs = $(this).html();
            $('#result').append('' + divs + '');
        })
    }, 'html');
});

问题是，当我更换a body我什么都没有（没有错误，只是没有html）。我假设身体是一个标签就像'一'是？我究竟做错了什么？

所以这对我有用：

 mas = $(data).find('a');

但是这并不是：

 mas = $(data).find('body');

恐怕，通过jQuery对象解析返回的HTML（即$(data) ）以获取body标签注定会失败。

原因是返回的data是一个string （尝试console.log(typeof(data)) ）。现在，根据jQuery文档，当从包含复杂HTML标记的字符串创建jQuery对象时，标签（如body可能会被剥离。发生这种情况是因为为了创建对象，HTML标记实际上被插入到不允许这种附加标记的DOM中。

文档中的相关引用：

如果一个字符串作为参数传递给$（），jQuery会检查字符串以查看它是否看起来像HTML。

[...]如果HTML比没有属性的单个标签更复杂，就像在上面的例子中那样，元素的实际创建由浏览器的innerHTML机制来处理。在大多数情况下，jQuery会创建一个新元素，并将元素的innerHTML属性设置为传入的HTML代码片段。当参数具有单个标签时（可选闭合标签或快速关闭） - $（“<img / >）或$（“<img>”），$（“<a> </ a>”）或$（“<a>”） - jQuery使用本地JavaScript createElement（）函数创建元素。

当传入复杂的HTML时，某些浏览器可能无法生成完全复制所提供的HTML源代码的DOM。如前所述，jQuery使用浏览器的.innerHTML属性来解析传入的HTML并将其插入到当前文档中。在这个过程中，一些浏览器会过滤掉<html>，<title>或<head>等元素。因此，插入的元素可能不能代表传递的原始字符串。

我结束了这个简单的解决方案：

var body = data.substring(data.indexOf("<body>")+6,data.indexOf("</body>"));
$('body').html(body);

也适用于头部或任何其他标签。

（使用xml解析的解决方案会更好，但如果XML响应无效，则必须执行一些“字符串解析”。）

我尝试了一些，并且已经确定了原因，所以在等待我感兴趣的真实答案之前，这里有一些帮助理解问题的方法

$.get('/',function(d){
    // replace the `HTML` tags with `NOTHTML` tags
    // and the `BODY` tags with `NOTBODY` tags
    d = d.replace(/(</?)html( .+?)?>/gi,'$1NOTHTML$2>',d)
    d = d.replace(/(</?)body( .+?)?>/gi,'$1NOTBODY$2>',d)
    // select the `notbody` tag and log for testing
    console.log($(d).find('notbody').html())
})

编辑：进一步的实验

看起来，如果将内容加载到iframe中，则可以通过一些dom对象层次结构访问帧内容。

// get a page using AJAX
$.get('/',function(d){

    // create a temporary `iframe`, make it hidden, and attach to the DOM
    var frame = $('<iframe id="frame" src="/" style="display: none;"></iframe>').appendTo('body')

    // check that the frame has loaded content
    $(frame).load(function(){

        // grab the HTML from the body, using the raw DOM node (frame[0])
        // and more specifically, it's `contentDocument` property
        var html = $('body',frame[0].contentDocument).html()

        // check the HTML
        console.log(html)

        // remove the temporary iframe
        $("#frame").remove()

    })
})

编辑：更多研究

contentDocument似乎是符合标准的方法来获得iFrame的window.document元素，但当然IE并不真正关心标准，所以这是如何获得对iFrame的window.document.body的引用对象以跨平台的方式...

var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var iframeBody = iframeDoc.body;
// or for extra caution, to support even more obsolete browsers
// var iframeBody = iframeDoc.getElementsByTagName("body")[0]

请参阅：iframe的contentDocument

链接地址: http://www.djcxy.com/p/4907.html

上一篇: Find body tag in an ajax HTML response

下一篇: Google Hosted Libraries is unnecessarily using cache breakers