Javascript 在ajax HTML响应中查找body标记
我正在进行一个ajax调用,以获取内容并像这样附加此内容:Javascript 在ajax HTML响应中查找body标记,javascript,jquery,ajax,document-body,Javascript,Jquery,Ajax,Document Body,我正在进行一个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();
$(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');
});
问题是,当我在body
中更改a
时,我什么也得不到(没有错误,只是没有html)。我假设身体是一个标签,就像“a”一样?我做错了什么
这对我来说很有用:
mas = $(data).find('a');
但这并不是:
mas = $(data).find('body');
恐怕,通过jQuery对象(即
$(数据)
)解析返回的HTML以获得body
标记注定会失败
原因是返回的数据
是一个字符串
(请尝试console.log(typeof(data))
)。现在,根据,当从包含复杂HTML标记的字符串创建jQuery对象时,像body
这样的标记可能会被剥离。这是因为为了创建对象,HTML标记实际上被插入到DOM中,而DOM不允许添加这样的标记
相关报价来自:
如果将字符串作为参数传递给$(),jQuery将检查该字符串是否类似于HTML
[……]
如果HTML比没有属性的单个标记更复杂,如上例所示,则元素的实际创建由浏览器的innerHTML机制处理。在大多数情况下,jQuery会创建一个新元素,并将该元素的innerHTML属性设置为传入的HTML代码段。当参数有单个标记(带有可选的结束标记或快速结束标记)-$(“”)或$(“”)、$(“”)或$(“”)时,jQuery使用本机JavaScript createElement()函数创建元素
当传入复杂的HTML时,某些浏览器可能不会生成DOM
它完全复制了提供的HTML源代码。如前所述,jQuery
使用浏览器的.innerHTML属性分析传递的HTML和
将其插入当前文档。在此过程中,某些
浏览器过滤掉某些元素,如、我做了一点试验,并在一定程度上确定了原因,因此在我感兴趣的真正答案之前,这里有一个帮助理解这个问题的技巧
$.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())
})
看:我发现了一些奇妙的东西(我想!) 你的html是字符串吗
var results = //probably an ajax response
下面是一个jquery对象,其工作方式与当前附加到DOM的元素完全相同:
var superConvenient = $($.parseXML(response)).children('html');
没有任何东西会从超方便中剥离出来。你可以做超方便。查找('body')
,甚至
superConvenient.find('head > script');
superconvent
的工作原理与每个人都习惯使用的jquery元素完全相同
注
在这种情况下,字符串results
需要是有效的XML,因为它被提供给JQuery的parseXML
方法。HTML响应的一个常见特性可能是
标记,从这个意义上讲,这将使文档无效。
标记可能需要在使用此方法之前剥离!还要注意这样的特性如
,无结束标记的标记,例如:
<ul>
<li>content...
<li>content...
<li>content...
</ul>
- 内容。。。
- 内容。。。
- 内容。。。
…以及浏览器可以轻松解释的HTML的任何其他功能,但会使XML解析器崩溃。我最终得到了这个简单的解决方案:
var body = data.substring(data.indexOf("<body>")+6,data.indexOf("</body>"));
$('body').html(body);
var body=data.substring(data.indexOf(“”+6,data.indexOf(“”));
$('body').html(body);
也适用于头或任何其他标记
(使用xml解析的解决方案会更好,但是对于无效的xml响应,您必须执行一些“字符串解析”。Regex解决方案对我来说很有效:
var head = res.match(/<head.*?>.*?<\/head.*?>/s);
var body = res.match(/<body.*?>.*?<\/body.*?>/s);
var head=res.match(/.*?/s);
变量body=res.match(/.*?/s);
详细说明:请添加从查询文件中获得的示例响应。php@Rafael你是说我的控制台日志?它可以是
console.log(数据)
或任何显示您通过ajax调用收到的完整字符串的内容。我刚刚用简化的代码和不同的页面进行了检查,可以确认我遇到了相同的问题。它可以选择正文
中的元素,但不能选择正文
本身。@Rafael我不确定,但我认为它必须是一个url(fom input.val)这可以是任何url。此外,它似乎对选择器使用的语法没有任何区别,因为它似乎是jQuery核心中的一个限制,因此$('body',d)
与$(d)具有相同的结果。find('body'))
。您好,谢谢您的支持。不过,我想为任何给定的网站使用我的代码,因为我们知道有些网站不支持iFrame。也许它在“jquery环境”中不起作用,我必须使用纯javascript。我一直在尝试使用document.getElementsByTagName(“body”)[0]
到目前为止运气不好,我认为问题是,你不能在DOM中添加另一个HTML
、头或体。如果你试图将DIV
标记的.innerHTML
设置为包含这些被禁止的元素,它根本不会添加它们——这就是为什么我希望jQuery不能选择t的原因哼哼。@Youss你能给我解释一下哪些网站不支持iFrame吗?我原以为这些天它们几乎得到了普遍支持。如果你找到了相关的解决方法,也可以将其作为一个答案发布。我不同意这是注定要失败的!我在这个答案上发布的解决方案非常有效,与jquer中的任何其他解决方案一样方便y、 @GershomMaes OP提出的问题是关于直接解析返回的HTML字符串。您的解决方案虽然是一个巧妙的技巧,但首先通过将HTML字符串作为XML文档进行间接解析来解决这个问题。这并不能否认直接解析HTML会剥离主体
标记这一事实。太好了!我很高兴有人这么认为因为我个人是眉毛,所以这有点用处
var body = data.substring(data.indexOf("<body>")+6,data.indexOf("</body>"));
$('body').html(body);
var head = res.match(/<head.*?>.*?<\/head.*?>/s);
var body = res.match(/<body.*?>.*?<\/body.*?>/s);