跨域/异域获取src的html内容答案

【问题标题】：Cross/Different Domain get src's HTML content跨域/异域获取src的html内容
【发布时间】：2016-04-03 13:49:30
【问题描述】：

假设我有 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 上，我听说由于跨域问题而无法访问它们。

我想知道是否有另一种方法可以将 HTML 标记从 x.html 检索到 example.html

也许不用<iframe />??

【问题讨论】：

stackoverflow.com/a/6170976/19679

标签： html iframe cross-domain

【解决方案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);
    }
});

【讨论】：

【解决方案2】：

如果我理解正确，您想从一个站点上的 DIV 中提取内容并将其显示在另一个站点上。这有几个问题，但我将专注于技术方面，并假设您在提取内容方面是善意的。

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

作为重要的附注，但是您不能这样做，因为所有现代浏览器都以这种方式禁止跨站点访问：

来自 JQuery .load() 页面：

附加说明：由于浏览器安全限制，大部分“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议中成功检索数据。

然后退房：

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

还有一点警告。如果您不控制其他站点上的代码，您可能会将自己暴露在严重的安全问题中，因此请仅在您可以控制其他站点或出于某种原因对该站点有绝对信任的情况下执行此操作。或者，如果可用，您应该尝试为您尝试从中获取数据的站点/服务使用 API。

【讨论】：