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

Parsing Ajax loaded HTML content in IE

本文关键字：HTML 内容 加载 Ajax IE 解析      更新时间：2023-09-26

我在周围看到过类似的问题，但似乎没有一个答案可以帮助我的情况......

基本上，我想使用 $.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]);
});

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

这是一个同源策略问题。

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

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

不过，与其自己这样做，我强烈建议您查看easyXDM库，以便进行这样的跨域消息。您基本上会在另一个域上打开一个隐藏的 iframe，并在父框架和隐藏框架之间来回传递消息。而且，由于隐藏框架与 html 位于同一域中，因此对它进行 ajaxing 不会有问题。

http://easyxdm.net/wp/

相关文章：