我想获取 iframe 的内容，但发生错误答案

【问题标题】：I want to get contents of iframe , but an error occurred我想获取 iframe 的内容，但发生错误
【发布时间】：2015-09-07 10:56:07
【问题描述】：

我想获取 iframe 的内容，但是发生了错误。

错误：访问属性“文档”的权限被拒绝

...irstChild)},contents:function(a){return m.nodeName(a,"iframe")?a.contentDocument...

我的代码：

<iframe frameborder="0" scrolling="no" width="130" height="198"
   src="https://tpc.googlesyndication.com/simgad/9598136166282506848" name="imgbox" class="iView">
   <p>iframes are not supported by your browser.</p>
</iframe>


$(document).ready(function(){
    var cnt = $(".iView").contents();
    console.log(cnt);
    })

【问题讨论】：

似乎您正在 iFrame 中打开第三方网站并尝试访问其文档。你不能那样做。
有没有办法获取 iframe 内容？？？
如果 iFrame 有 src 指向您自己的域中存在的网络资源，即主父页面的域，那么您可以访问其内容。

标签： javascript jquery html iframe

【解决方案1】：

同源策略限制您访问 iframe 内容中的 DOM。但是，它并不妨碍您勉强嵌入页面。

有关同源政策的更多详细信息以及解决方法，请参阅以下社区 wiki：Ways to circumvent the same-origin policy

【讨论】：

【解决方案2】：

如果 iFrame 内容来自同一服务器，您可以通过 Javascript 访问该内容。否则它将不允许您访问 iFrame 内容。错误：访问属性“文档”的权限被拒绝。

【讨论】：

【解决方案3】：

实际上，当您从跨域执行此操作时，这是无法完成的。您将收到权限被拒绝错误。只有当 iframe 源来自同一服务器时，才可以这样做。

【讨论】：

【解决方案4】：

我创建了一个示例代码。现在您可以轻松地从不同的域了解您无法访问 iframe 的内容.. 相同的域我们可以访问 iframe 内容

我将我的代码分享给你，请运行此代码检查控制台。我在控制台打印图像 src。有四个 iframe，两个 iframe 来自同一个域，另外两个来自其他域（第三方）。你可以看到两个图像 src(https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

和

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif) 在控制台也可以看到两个权限错误( 2 Error: Permission denied to access property 'document'

...irstChild)},contents:function(a){return m.nodeName(a,"iframe")?a.contentDocument...

) 来自第三方 iframe。

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>

【讨论】：