web-dev-qa-db-fra.com

Erreur: autorisation refusée d'accéder à la propriété 'document'

Je reçois continuellement l'erreur "Error: Permission denied to access property 'document'" alors que j'ai déjà défini dans mon X-FRAME options d'autoriser l'autre domaine, comme celui-ci.

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

Ci-dessous, l'en-tête de la requête iframe, indique clairement que j'ai défini pour permettre au domaine d'accéder à l'iframe mais ne fonctionne pas. Tout ce que je veux, c'est redimensionner l'iframe en javascript.

enter image description here

Voici mon code javascript pour redimensionner la hauteur d'iframe.

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

Comment puis-je faire ceci? Veuillez suggérer.

javascriptphpjqueryx-frame-options
5
Coder anonymous

J'ai eu récemment ce problème moi-même… .. Enfin, je l'ai résolu avec la méthode postMessage.

  1. Dans le document inclus dans l'iFrame, je vérifie s'il fonctionne réellement à partir d'un 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. Si le document est exécuté dans un iFrame, appelez une fonction que nous appellerons 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. Ajoutez le code suivant au document qui inclut votre 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);

Malheureusement, je ne me souviens pas des sources exactes de tout cela, car je visais beaucoup de solutions différentes ici sur Stackoverflow, mais aussi sur différents sites Web. Mais cette solution fonctionne bien pour moi.

À votre santé

15
entiendoNull

Vous ne savez pas pourquoi les autres solutions utilisent un identifiant iFrame. Cela devrait aussi fonctionner sans:

Page dans l'iFrame qui envoie un message à l'extérieur:

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

Cadre parent:

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

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