web-dev-qa-db-fra.com

Problème d'iframe entre domaines

Par exemple, j'ai un site nommé example.com sur lequel iframe est intégré au domaine iframe.net, maintenant je veux lire le contenu de iframe et transmettre un paramètre pour afficher un message textuel. J'aime Bonjour avec nom d'utilisateur. 

Maintenant, le problème est que nous ne pouvons pas établir de connexion entre les deux, même si je ne parviens pas à obtenir le innerHTML de l'iframe, j'ai utilisé l'approche suivante.

document.getElementById('myframe').contentWindow.document.body.innerHTML;

Il lève l'erreur "Permission refusée d'accéder à la propriété"

Est-ce que quelqu'un sait lire et écrire dans une plate-forme interdomaine?

javascriptjqueryhtmlhtml5mootools
38
Kunal Vashist

Si vous n'avez pas le contrôle sur le site cadré, vous ne pouvez pas contourner la stratégie inter-domaines.

Si vous avez le contrôle sur les deux sites, vous pouvez utiliser la méthode postMessage pour transférer des données sur différents domaines. Un exemple très basique:

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.Origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');
51
Rob W

Dans Internet Explorer 8 , les événements passés en tant que paramètre peuvent être null , c'est pourquoi vous devez accéder à l'événement de manière différente:

Dans frame.html :

window.onmessage = function(event) {
   var evt = event || window.event;
   evt.source.postMessage('Message from iFrame', evt.Origin);
};

Sur main.html :

window.onmessage = function(event) {
   var evt = event || window.event;
   alert(evt.data);
};

L'événement est déclenché de la même manière que Rob W l'a présenté:

document.getElementById('frameId').contentWindow.postMessage('message','*');
4
Przemek Marcinkiewicz

Accès aux éléments iframe interdomaines dans React avec (srcDoc): -

<iframe srcDoc={this.state.HTML}  width='100%' id='iframetnd' onLoad={this.onclickinsideiframe}/>


 onclickinsideiframe=()=>{
      if(document.getElementById('iframetnd')!==null){

                let iframe = document.getElementById('iframetnd');

                let innerDocument = (iframe.contentDocument)  
                                   ? iframe.contentDocument 
                                   : iframe.contentWindow.document;
                let Obj = innerDocument.getElementsByClassName("navButtons")[0];
                    if(Obj !== undefined){
                        Obj.onclick = ()=>this.func();
          }
       }
    }



  func=()=>{
           this.setState({page:2})
           this.arrangeTest();
        }
0
P L DHIMAN

iFrame ne permet pas d'accéder au contenu de la plate-forme Cross Domain. Vous ne pouvez y accéder que si votre iFrame utilise le même domaine.

Cette solution fonctionne comme iFrame. J'ai créé un script PHP pouvant extraire tout le contenu de l'autre site Web. Le plus important est que vous pouvez facilement appliquer votre jQuery personnalisé à ce contenu externe. Veuillez vous reporter au script suivant pour obtenir tous les contenus de l’autre site Web, puis vous pourrez également appliquer votre cusom jQuery/JS. Ce contenu peut être utilisé n'importe où, à l'intérieur de tout élément ou de toute page.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}
0
Ahsan Horani