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


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

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

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



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:

     parent.postMessage('your message', '*');

Parent frame:

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

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


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