javascript - 错误 : Permission denied to access property 'document'

Question

我不断收到错误 “错误:访问属性‘文档’的权限被拒绝”，而我已经在我的 X-FRAME 选项 中定义允许其他域，像这样..

 <?php
        header('X-Frame-Options: ALLOW-FROM http://mydomain.com'); 
    ?>

下面是 iframe 请求的 header ，清楚地表明我已定义允许域访问 iframe 但不工作。我只想使用 javascript 调整 iframe 的大小。

这是我调整 iframe 高度的 javascript 代码。

<iframe src="http://mydomain.com/xxx/yyy" id="idIframe" onload="iframeLoaded();" allowtransparency="true" frameborder="0" width="100%" scrolling="no"></iframe>
<script type="text/javascript">
function iframeLoaded() {
    var iFrameID = document.getElementById('idIframe');
    if(iFrameID) {
          iFrameID.height = "";
          if(iFrameID.contentWindow.document.body.scrollHeight < 500) {
              iFrameID.height = "500px";
          } else {
              iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
          }
    }   
}
</script>

我该怎么做？请提出建议。

Answer 1

我最近遇到了这个问题。最后我用postMessage方法解决了。

1. 在 iFrame 包含的文档中，我检查它是否真的从 iFrame 运行。

   function inIframe(){
       if(top != self){
            var contentHeight = $('#myIframeContent').height(); //Just this part I did with jQuery as I was sure that the document uses it
            postSize(contentHeight);
            }
       }
   

2. 如果文档在 iFrame 中运行，请调用我们将调用的函数 postSize。

   function postSize(height){
        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
   
       if(typeof target != "undefined" && document.body.scrollHeight){
           target.postMessage(height, "*");
           }
       }
   

3. 将以下代码添加到包含您的 iFrame 的文档中

   function receiveSize(e){
       if(e.origin === "http://www.mywebsite.net"){
           var newHeight = e.data + 35;
           document.getElementById("myIframeID").style.height = newHeight + "px";
           }
       }
   
   window.addEventListener("message", receiveSize, false);
   

不幸的是，我不记得所有这些的确切来源，因为我在 Stackoverflow 上以及不同的网站上查看了很多不同的解决方案。但这个解决方案对我很有用。

干杯