交叉/不同域获取src的HTML内容

Question

让我说我有example.html，里面我有一个像

这样的代码

<iframe src="x.com" id="x"></iframe>

来自x.com，我想把所有内容都搞定。

<div class="content">...</div> 

进入example.html里面的

<div class="xCodes">ONTO HERE</div>

所以我试图让x.com中的元素显示在example.html上，我听说无法访问它们以解决跨域问题。

我想知道是否有另一种方法可以将x.html的HTML代码检索到example.html

也许不使用<iframe /> ??

Answer 1

来自：http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/

$('.xCodes').load('http://x.com/x.html');

或

$.ajax({
    url: 'http://x.com/x.html',
    type: 'GET',
    success: function(res) {
        var data = $(res.responseText).find('.content').text();
        $('.xCodes').html(data);
    }
});

Answer 2

如果我理解正确，您想要从一个站点上的DIV中翻录内容并将其显示在另一个站点上。这有几个问题，但我会专注于技术方面，并假设你在拉动内容时表现出诚意。

您在这里遇到的真正问题是您无权访问尚未加载的网页的DOM元素。因此，您需要告诉浏览器加载该页面的数据，以便您可以访问应该在页面上加载的元素，然后将信息拉出。 JQuery有一个很好的小方法来帮助调用.load（）（http://api.jquery.com/load/）。

作为一个重要的旁注但是你无法做到这一点，因为所有现代的broswers都禁止以这种方式跨站点访问：

来自JQuery .load（）页面：

  

附加说明：   由于浏览器安全限制，大多数“Ajax”请求都遵循相同的原始策略;请求无法成功从其他域，子域或协议中检索数据。

并查看：

  

http://en.wikipedia.org/wiki/Same_origin_policy

再多一点警告。如果您不控制其他站点上的代码，则可能会使您面临严重的安全问题，因此只有在您控制其他站点或出于某种原因对该站点具有绝对信任的情况下才会这样做。或者，您应该尝试使用API​​来获取您尝试从中获取数据的站点/服务。