获取跨域iframe的DOM内容

D-N*_*ice 71 html javascript iframe jquery html5

我有一个跨域网站的iframe.我想读取iframe的DOM,我认为这是可能的,因为使用检查器,我甚至可以修改iframe的DOM.然而,我试图阅读它的每一种方式,我都遇到了相同的原始政策.我想要的只是从iframe加载到我的本地DOM中的内容.我以为它会那么简单$(document.body).find('iframe').html(),但那会返回空字符串.

我真的希望有一种方法可以做到这一点,因为我过去几天一直在做的工作是基于这种可行性.

谢谢

Mát*_*ond 72

你不能.XSS保护.javascript无法读取跨站点内容.没有主要的浏览器会允许你.对不起,但这是一个设计缺陷,你应该放弃这个想法.

编辑

请注意,如果您对加载到iframe中的网站具有编辑权限,则可以使用postMessage(另请参阅浏览器兼容性)

  • 我知道它是出于安全原因而实现的,我的意思是基于这个概念的设计缺陷(对此而言). (13认同)
  • 如果你的意思是设计(流)缺陷,那么不,它不是一个缺陷,这是为了安全而实施的. (10认同)
  • 注意:您可以使用window.postMessage在iframe和主窗口之间进行通信. (3认同)
  • 在那种情况下,我误解了 (2认同)
  • 作为参考,跨域same-origin-policy表示主机名,端口和协议必须全部相同-https://en.wikipedia.org/wiki/Same-origin_policy(例如app1.example.com和app2.example .com不同; example.com和www.example.com不同) (2认同)

Clé*_*nay 14

有一个简单的方法.

  1. 你创建了一个iframe,其内容类似于" http://your-domain.com/index.php?url=http://the-site-you-want-to-get.com/unicorn

  2. 然后,您只需使用$ _GET获取此URL并使用file_get_contents($ _ GET ['url'])显示内容;

您将获得一个域名与您的域名相同的iframe,然后您就可以使用$("iframe").contents().find("body")来操作内容.

  • 抱歉迟到了,我没注意到.1.创建一个php页面,从GET参数显示所需页面的内容.content.php` <?php echo file_get_contents($ _ GET ['url']); ?>`2.然后,在您的主页面中,添加将加载此页面的iframe.`<iframe src ="content.php?url = http://google.com"></iframe>`3.它会在iframe中显示想要的页面.Content.php来自您的域,因此您可以使用JS操纵iframe内容,而不违反跨源策略.`var $ iframeBody = $("iframe").contents().find("body"); $ iframeBody.css("background",blue");` (4认同)
  • 请注意,如果您使用此方法,请务必小心,因为这样可以将您的服务器用作事实上的代理.因此,这应该在身份验证之后和/或应该限制允许的网站列表. (3认同)
  • 你能解释一下细节吗?非常感谢你@@ (2认同)

dev*_*att 8

如果您可以访问iframed页面,则可以使用easyXDM之类的东西在iframe中进行函数调用并返回数据.

如果您无权访问iframed页面,则必须使用服务器端解决方案.使用PHP,你可以做一些快速和脏的事情,如:

    <?php echo file_get_contents('http://url_of_the_iframe/content.php'); ?> 
Run Code Online (Sandbox Code Playgroud)

  • 您先生是学者和绅士 (3认同)

Mak*_*zik 5

如果您有权访问加载的域/iframe,那么您可以使用 window.postMessage 在 iframe 和主窗口之间进行通信。

在 iframe 中使用 JavaScript 读取 DOM 并通过 postMessage 将其发送到顶部窗口。

更多信息:https : //developer.mozilla.org/en-US/docs/Web/API/Window/postMessage