2009-09-04 7 views
28

J'ai besoin d'accéder à l'URL du domaine parent depuis mon Iframe qui se trouve dans un autre domaine. Par exemple, "example.com" est mon site Web qui a un Iframe d'un autre domaine parent, tel que "google.com". Ici, je dois accéder à l'URL du domaine parent à partir de mon exemple.com. C'est-à-dire, j'ai besoin d'obtenir l'URL "google.com" dans mon domaine "example.com". De plus, le domaine parent ne peut pas être codé en dur.Comment implémenter Cross Access URL Access à partir d'un Iframe en utilisant Javascript?

Ce que j'essayé utilisait le code suivant:

window.parent.location.href() 

, mais cela se traduit par erreur Accès refusé. Comment puis-je l'appliquer correctement pour y parvenir?

Répondre

13

Vous pourriez jeter un oeil à ces questions/réponses; ils pourraient vous donner quelques informations concernant votre problème:

Pour faire court: accès iframe d'un autre domaine n'est pas possible, pour des raisons de sécurité - ce qui explique le message d'erreur que vous obtenez.


La page Same origin policy sur wikipedia apporte quelques informations sur cette mesure de sécurité:

En un mot, la politique permet des scripts en cours d'exécution sur les pages provenant du même site pour accéder à des méthodes de chaque autres et propriétés sans restrictions spécifiques - mais empêche l'accès à la plupart des méthodes et propriétés à travers les pages sur différents sites.

Une séparation stricte entre le contenu fournis par les sites sans lien doit être maintenu côté client pour éviter la perte de confidentialité des données ou intégrité.

33

Vous pouvez essayer de vérifier le referer, qui devrait être le site parent si vous êtes un iframe

vous pouvez le faire comme ceci:

var href = document.referrer; 
+0

Cela ne fonctionne que lorsque vous ouvrez l'iframe pour la première fois. Si vous naviguez dans l'iframe, la page précédente sera alors le référant. – Marco

1

Vous avez deux Options:

  1. Portée du domaine vers le bas (voir document.domain) à la fois la page contenant et iframe au même e ing. Ensuite, ils ne seront pas liés par des contraintes de 'même origine'.

  2. Utilisez postMessage qui est pris en charge par tous les navigateurs HTML5 pour la communication cross-domain.

0

Bon article ici: Cross-domain communication with iframes

vous pouvez également régler directement document.domain les mêmes dans les deux cadres (même

document.domain = document.domain; 
Code

a un sens parce que le port remet à zéro à null), mais cette astuce n'est pas générale.

-2

essayer

window.frameElement.ownerDocument.domain 
5

Au lieu d'utiliser le referrer, vous pouvez mettre en œuvre pour communiquer window.postMessage iframes accross/fenêtres à travers les domaines.
Vous postez sur window.parent, puis parent renvoie l'URL.
Cela fonctionne, mais nécessite une communication asynchrone.
Vous devrez écrire un wrapper synchrone autour des méthodes asynchrones, si vous en avez besoin synchrone.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title></title> 

    <!-- 
    <link rel="shortcut icon" href="/favicon.ico"> 


    <link rel="start" href="http://benalman.com/" title="Home"> 

    <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css"> 

    <script type="text/javascript" src="/js/mt.js"></script> 
    --> 
    <script type="text/javascript"> 
     // What browsers support the window.postMessage call now? 
     // IE8 does not allow postMessage across windows/tabs 
     // FF3+, IE8+, Chrome, Safari(5?), Opera10+ 

     function SendMessage() 
     { 
      var win = document.getElementById("ifrmChild").contentWindow; 

      // http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/ 


      // http://stackoverflow.com/questions/16072902/dom-exception-12-for-window-postmessage 
      // Specify origin. Should be a domain or a wildcard "*" 

      if (win == null || !window['postMessage']) 
       alert("oh crap"); 
      else 
       win.postMessage("hello", "*"); 
      //alert("lol"); 
     } 



     function ReceiveMessage(evt) { 
      var message; 
      //if (evt.origin !== "http://robertnyman.com") 
      if (false) { 
       message = 'You ("' + evt.origin + '") are not worthy'; 
      } 
      else { 
       message = 'I got "' + evt.data + '" from "' + evt.origin + '"'; 
      } 

      var ta = document.getElementById("taRecvMessage"); 
      if (ta == null) 
       alert(message); 
      else 
       document.getElementById("taRecvMessage").innerHTML = message; 

      //evt.source.postMessage("thanks, got it ;)", event.origin); 
     } // End Function ReceiveMessage 




     if (!window['postMessage']) 
      alert("oh crap"); 
     else { 
      if (window.addEventListener) { 
       //alert("standards-compliant"); 
       // For standards-compliant web browsers (ie9+) 
       window.addEventListener("message", ReceiveMessage, false); 
      } 
      else { 
       //alert("not standards-compliant (ie8)"); 
       window.attachEvent("onmessage", ReceiveMessage); 
      } 
     } 
    </script> 


</head> 
<body> 

    <iframe id="ifrmChild" src="child.htm" frameborder="0" width="500" height="200" ></iframe> 
    <br /> 


    <input type="button" value="Test" onclick="SendMessage();" /> 

</body> 
</html> 

Child.htm

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title></title> 

    <!-- 
    <link rel="shortcut icon" href="/favicon.ico"> 


    <link rel="start" href="http://benalman.com/" title="Home"> 

    <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css"> 

    <script type="text/javascript" src="/js/mt.js"></script> 
    --> 

    <script type="text/javascript"> 
     /* 
     // Opera 9 supports document.postMessage() 
     // document is wrong 
     window.addEventListener("message", function (e) { 
      //document.getElementById("test").textContent = ; 
      alert(
       e.domain + " said: " + e.data 
       ); 
     }, false); 
     */ 

     // https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage 
     // http://ejohn.org/blog/cross-window-messaging/ 
     // http://benalman.com/projects/jquery-postmessage-plugin/ 
     // http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html 

     // .data – A string holding the message passed from the other window. 
     // .domain (origin?) – The domain name of the window that sent the message. 
     // .uri – The full URI for the window that sent the message. 
     // .source – A reference to the window object of the window that sent the message. 
     function ReceiveMessage(evt) { 
      var message; 
      //if (evt.origin !== "http://robertnyman.com") 
      if(false) 
      { 
       message = 'You ("' + evt.origin + '") are not worthy'; 
      } 
      else 
      { 
       message = 'I got "' + evt.data + '" from "' + evt.origin + '"'; 
      } 

      //alert(evt.source.location.href) 

      var ta = document.getElementById("taRecvMessage"); 
      if(ta == null) 
       alert(message); 
      else 
       document.getElementById("taRecvMessage").innerHTML = message; 

      // http://javascript.info/tutorial/cross-window-messaging-with-postmessage 
      //evt.source.postMessage("thanks, got it", evt.origin); 
      evt.source.postMessage("thanks, got it", "*"); 
     } // End Function ReceiveMessage 




     if (!window['postMessage']) 
      alert("oh crap"); 
     else { 
      if (window.addEventListener) { 
       //alert("standards-compliant"); 
       // For standards-compliant web browsers (ie9+) 
       window.addEventListener("message", ReceiveMessage, false); 
      } 
      else { 
       //alert("not standards-compliant (ie8)"); 
       window.attachEvent("onmessage", ReceiveMessage); 
      } 
     } 
    </script> 


</head> 
<body style="background-color: gray;"> 
    <h1>Test</h1> 

    <textarea id="taRecvMessage" rows="20" cols="20" ></textarea> 

</body> 
</html> 
+0

Le chargement de l'iframe enfant ne fonctionnera pas dans un environnement en mode mixte. Par exemple, la page principale dans https et la page enfant dans un iframe (http). – lmiguelmh

+0

@lmiguelmh: Correct - si c'était le cas, ce serait un bug de sécurité et le navigateur aurait besoin d'être réparé. Ce que vous pouvez faire dans ce scénario est A) Mettre la page enfant dans https, B) formulaire-poste de la iframe à la page https, sur la page https vous avez des sockets Web qui sont notifiés si un formulaire-poste arrive sur le serveur. Vous pouvez également interroger dans un intervalle de x secondes si de nouvelles données sont arrivées. Si vous attribuez un guide à la publication, l'enfant peut interroger la page https (qui devrait être autorisée) via JSONP, en demandant la réponse de guid-poll jusqu'à ce qu'elle l'obtienne. Je ne sais pas si web-sockets pourrait être utilisé dans ThatCase. –

Questions connexes