Home » Php » javascript – Error: Permission denied to access property 'document'

javascript – Error: Permission denied to access property 'document'

Posted by: admin July 12, 2020 Leave a comment

Questions:

I am continuously getting the error "Error: Permission denied to access property 'document'" while i have already define in my X-FRAME options to allow the other domain, like this..

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

Below is the header of iframe request, clearly shows i have defined to allow the domain to access the iframe but not working. All i want is to resize the iframe using javascript.

enter image description here

Here is my javascript code to resize the iframe height.

<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>

How can i do this? Please suggest.

How to&Answers:

I very recently had this issue myself.
Finally I solved it with the postMessage method.

  1. In the document included to the iFrame I check whether it’s actually running from an 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. If the document is running within an iFrame, call a function that we will call 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. Add the following code to the document that includes your 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);
    

Unfortunately I cannot remember the exact sources of all this as I was viewing a lot of different solutions here on Stackoverflow, but also different websites. But this solution works good for me.

Cheers

Answer:

Not sure why the other solutions use an iFrame ID. It should also work without:

Page within the iFrame which sends a message to outside:

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

Parent frame:

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

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

Answer:

updating compatability.js to latest version fixed it for me.