Question

我见过类似的问题，但似乎没有一个答案可以帮助我解决问题......

基本上，我想在使用$.ajax()（在不同的域中）加载一些HTML，并将其解析为它自己的DOM，因此我可以在我的实际窗口DOM中应用属性和操作HTML。

$.ajax({
    type: 'GET',
    url: 'http://example.com/index.html',
    dataType: 'html',
    crossDomain: true,
    cache: false,
    success: function(data) 
    {
        var src = $('body img', data).first().attr("src");
        //also tried: var src = $('body', $(data)).first().attr("src"); 
        $('#someDiv img').attr("src", src);
    }
});

示例HTML文件是：

<html>
<body>
    <img src="someurl"></img>
</body>
</html>

它适用于Firefox，但不适用于IE，无论我尝试什么，每当我尝试解析和读取时，它都会返回null。有什么建议吗？

编辑：

我的问题似乎有些含糊不清。问题是解析，而不是AJAX。 AJAX正确返回html字符串，但jQuery无法解析它。

编辑2：

我找到了一个“解决方案”，但它并不像我想要的那样好，它通过HTML字符串进行切割和排序，并提取数据，而不是将其应用到DOM。似乎可以高效运行，因为我可以预测数据的顺序。

归结起来，就像这样：

var imgsrcs = new Array(5);
var searchItem = '<img src="';
for (var a=0; a<5; a++) {
    var startLoc = data.search(searchItem) + searchItem.length;
    for (var i=0; i<data.length; i++) {
        if (data.charAt(startLoc + i) == '"')
            break;
        imgsrcs[a] += data.charAt(startLoc + i);
    }
    data = data.substring(startLoc + i, data.length);
}
$('.image').each(function(i) {
    $(this).attr("src", imgsrcs[i]);
});

相当丑陋，但我解决了我的问题，所以我想我也可以发布它。

Answer 1

这是同源政策问题。

jquery的crossDomain函数中的ajax标志不会自动使跨域请求在所有浏览器中都起作用（并非所有浏览器都支持CORS）。由于您是从其他域请求此操作，因此普通请求实际上无法读取数据（甚至无法发出请求）。

通常，对于json数据，您可以执行JSONP，这是crossDomain经常标记启用的内容。但是，JSON是独一无二的，因为它可以在javascript中原生地读取。由于无法读取HTML，因此您需要将其包装在可解析的javascript中以使用JSONP等技巧。

但是，我强烈建议您查看easyXDM库，以便像这样做跨域邮件，而不是自己这样做。你基本上在另一个域上打开一个隐藏的iframe，并在父帧和隐藏帧之间来回传递消息。并且，由于隐藏的框架与相同的域域，因此它没有任何问题。

http://easyxdm.net/wp/

在IE中解析Ajax加载的HTML内容

1 个答案: