我正在进行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');
恐怕通过jQuery对象(即$(data)
)解析返回的HTML以获取body
标记注定会失败。
原因是返回的data
是string
(try console.log(typeof(data))
)。现在,根据jQuery文档,当从包含复杂HTML标记的字符串创建jQuery对象时,诸如的标签body
可能会被剥离。发生这种情况的原因是,为了创建对象,实际上将HTML标记插入了DOM,而该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);
也可以与head或任何其他标签一起使用。
(使用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是获取window.document
iFrame元素的符合标准的方法,但是IE当然并不真正关心标准,因此这就是如何以window.document.body
跨平台的方式获取对iFrame对象的引用。 。
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]
我想出了一些奇妙的东西(我认为!)
有您的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解析器崩溃。
适用于我的正则表达式解决方案:
var head = res.match(/<head.*?>.*?<\/head.*?>/s);
var body = res.match(/<body.*?>.*?<\/body.*?>/s);
详细说明:https : //regex101.com/r/kFkNeII/1
文章标签:ajax , document-body , javascript , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!