Question

我正在尝试遍历一个包含远程网页（HTML输出）的AJAX响应。

我的目标是遍历远程页面的“脚本”，“链接”和“标题”元素 - 必要时加载它们，并将其内容嵌入当前页面。

它在FF / IE中运行良好，但出于某种原因 - Chrome＆amp; Safari表现不同：当我在响应上运行.each（）循环时，Chrome / Safari似乎省略了页面部分下的所有内容。

这是我目前的代码：

$.ajax({
    url: 'remoteFile.php',
    cache: false,
    dataFilter: function(data) { 
        console.log(data); 
        /* The output seems to contain the entire response, including the <head> section - on all browsers, including Chrome/Safari */

        $(data).filter("link, script, title").each(function(i) {
            console.log($(this)); 
            /* IE/FF outputs all of the link/script/title elements, Chrome will output only those that are not in the <head> section */
        });

        console.log($(data)); 
        /* This also outputs the incomplete structure on Chrome/Safari */

        return data;
    },
    success: function(response) {}
});

我一直在努力解决这个问题已经有一段时间了，我在谷歌搜索中发现了一些其他类似的案例，但没有真正的解决方案。这在jQuery 1.4.2和jQuery 1.3.2上都会发生。

我真的不想用.indexOf（）和.substring（）来解析响应 - 在我看来，对于客户来说这将是一种过度杀伤。

非常感谢提前！

Answer 1

我认为这与jQuery如何处理HTML字符串并从中创建DOM节点有关。在其他一些事情中，jQuery将创建一个临时<div>并将其innerHTML设置为您传递给$(...)的任何HTML，从而产生一堆可从<div>中提取的DOM节点。 {1}}并将其作为jQuery集合交还给您。

我认为问题出现的原因是<html>，<head>和<body>元素，所有这些元素都无法很好地附加到<div>元件。浏览器的行为往往有所不同，有些人似乎忽略了这些顶级元素，只是将你的内容交还给他们 - 其他人则完全忽略了这些元素，甚至不会给你他们的后代。

似乎，避免这种跨浏览器问题的方法是在解析之前简单地用一些其他假元素替换麻烦的元素。 E.g。

$(
    // replace <html> with <foohtml> .. etc.
    data.replace(/<(\/?)(head|html|body)(?=\s|>)/g, '<foo$1$2')
).filter("link, script, title").each(function(i) {
    console.log($(this));
    // do your stuff
});

另外，我不认为filter就足够了，因为它不会以后代元素为目标。这可能是一种更好的方法：

$(
    // replace <html> with <foohtml> .. etc.
    data.replace(/<(\/?)(head|html|body)(?=\s|>)/g, '<foo$1$2')
).find('link,script,title').andSelf().filter("link,script,title").each(function(i) {
    console.log($(this));
    // do your stuff
});

jQuery：在Chrome / Safari中遍历AJAX响应

1 个答案: