在 ajax HTML 响应中查找 body 标记

问题描述 投票：0回答：6

我正在进行 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）。我假设 body 是一个标签，就像“a”一样？我做错了什么？

所以这对我有用：

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

但这不是：

 mas = $(data).find('body');
javascript jquery ajax document-body
6个回答
13
投票

我最终得到了这个简单的解决方案：

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

也适用于 head 或任何其他 tag。

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

12
投票

通过 jQuery 对象（即 

$(data)
）解析返回的 HTML 以获取 
body
标签注定会失败，我担心。

原因是返回的

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

文档

的相关引用：

如果将字符串作为参数传递给 $()，jQuery 将检查该字符串以查看它是否看起来像 HTML。

[...] 如果 HTML 比没有属性的单个标记更复杂（如上面的示例所示），则元素的实际创建由浏览器的 innerHTML 机制处理。在大多数情况下，jQuery 创建一个新元素，并将该元素的 innerHTML 属性设置为传入的 HTML 片段。当参数具有单个标记（带有可选的结束标记或快速结束标记）时 — $( "

" )或 $( "

" )、$( "< img / >< img >" ) 或 $( "< a >" ) — jQuery 使用本机 JavaScript createElement() 函数创建元素。< /a > < a >传入复杂HTML时，部分浏览器可能不会生成DOM 完全复制了所提供的 HTML 源代码。如前所述，jQuery 使用浏览器的 .innerHTML 属性来解析传递的 HTML 并 将其插入到当前文档中。在这个过程中，一些 浏览器会过滤掉某些元素，例如

、

或 < html > 元素。结果，插入的元素可能不 代表传递的原始字符串。< title > < head >

6
投票

$.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 的内容文档

4
投票

你的 html 是字符串吗？

var results = //probably an ajax response 

这是一个 jquery 对象，其工作方式与当前附加到 DOM 的元素完全相同：

var superConvenient = $($.parseXML(response)).children('html'); 

superConvenient
不会被剥夺任何东西！你可以做类似
superConvenient.find('body')
甚至
的事情


superConvenient.find('head > script');




superConvenient
 与每个人都习惯的 jquery 元素完全一样！！！！


注意



在这种情况下，字符串
results
需要是
有效的XML
，因为它被提供给JQuery的parseXML方法。 HTML 响应的一个常见特征可能是 
<!DOCTYPE>
 标签，从这个意义上来说，它会使文档无效。在使用此方法之前，可能需要删除 
<!DOCTYPE>
 标签！还要注意诸如 
<!--[if IE 8]>...<![endif]-->
 之类的功能，没有结束标签的标签，例如：


<ul>
    <li>content...
    <li>content...
    <li>content...
</ul>




...以及 HTML 的任何其他功能，浏览器会宽松地解释，但会使 XML 解析器崩溃。

    





    

    
    
    

    

        

            

                

                    
2
投票

                    
                

            

        

        



var head = res.match(/<head.*?>.*?<\/head.*?>/s);
var body = res.match(/<body.*?>.*?<\/body.*?>/s);




详细解释：
https://regex101.com/r/kFkNeI/1

    




    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


var parser = new DOMParser();
var doc = parser.parseFromString(response, 'text/html');
var body = $(doc).find('body').html();


    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.