web-dev-qa-db-ja.com

エラー：プロパティ 'ドキュメント'へのアクセスが拒否されました

継続的にエラーが発生します"Error: Permission denied to access property 'document'"で定義済みですが、X-FRAME optionsこのような他のドメインを許可します。

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

以下は、iframeリクエストのヘッダーです。ドメインがiframeにアクセスできるように定義されているが、機能していないことを明確に示しています。 JavaScriptを使用してiframeのサイズを変更するだけです。

enter image description here

これが、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>

これどうやってするの？提案してください。

javascriptphpjqueryx-frame-options
6
Coder anonymous

私は最近、この問題を自分で経験しました。最後に、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でさまざまなソリューションだけでなく、さまざまなWebサイトも表示していたため、これらすべての正確なソースを思い出せません。しかし、このソリューションは私にとってはうまくいきます。

乾杯

15
entiendoNull

他のソリューションがiFrame IDを使用する理由がわかりません。それはまたなしで動作するはずです：

メッセージを外部に送信するiFrame内のページ：

<script>
     parent.postMessage('your message', '*');
</script>

親フレーム：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  console.log('Message: ',  event.data);
}
0
ownking