2009-09-04 10 views
28

Potrzebuję uzyskać dostęp do adresu URL domeny nadrzędnej z mojego elementu iframe, który znajduje się w innej domenie.Jak mogę wdrożyć URL dostępu do domeny z poziomu elementu iframe za pomocą JavaScript?

Na przykład "example.com" to moja witryna internetowa zawierająca element iframe z innej domeny nadrzędnej, na przykład "google.com". Tutaj muszę uzyskać dostęp do adresu URL domeny nadrzędnej z mojego example.com. To znaczy, muszę uzyskać URL "google.com" w mojej domenie "example.com". Co więcej, domena nadrzędna nie może być zakodowana na sztywno.

co starałem się stosując następujący kod:

window.parent.location.href() 

ale skutkuje to odmowa dostępu błędu. Jak mogę to właściwie wdrożyć, aby to osiągnąć?

Odpowiedz

13

Być może zechcesz rzucić okiem na te pytania/odpowiedzi; mogliby podać kilka informacji dotyczących problemu:

Żeby było krótkie: dostęp do iframe z innej domeny nie jest to możliwe ze względów bezpieczeństwa - co wyjaśnia komunikat o błędzie, który otrzymujesz.


Same origin policy strona na Wikipedii przynosi jakieś informacje na temat tego środka zabezpieczającego:

w skrócie, polityka pozwala skrypty działające na stronach pochodzących z tego samego miejsca, aby uzyskać dostęp do metod każdy nawzajem i właściwości bez szczególnych ograniczeń - ale uniemożliwia dostęp do większości metod i właściwości na różnych stronach w różnych witrynach.

ścisłe oddzielenie zawartości dostarczonych przez niezwiązanych miejsc należy utrzymywany po stronie klienta, aby zapobiec utraty poufności danych lub integralności.

33

Można spróbować i sprawdzić odsyłający, która powinna być miejscem, jeśli jesteś rodzicem iframe

można to zrobić tak:

var href = document.referrer; 
+0

Zadziała tylko po otwarciu iframe po raz pierwszy. Jeśli poruszasz się po elemencie iframe, poprzednia strona będzie stroną odsyłającą. – Marco

1

Masz parę Opcje:

  1. Zakres domena w dół (patrz document.domain) zarówno strony zawierającej a iframe do tej samej TH ing. Wtedy nie będą związani ograniczeniami "tego samego pochodzenia".

  2. Użyj funkcji postMessage obsługiwanej przez wszystkie przeglądarki HTML5 do komunikacji cross-domain.

0

Dobry artykuł tutaj: Cross-domain communication with iframes

Ponadto można bezpośrednio ustawić document.domain taka sama w obu ramek (nawet

document.domain = document.domain; 

kod ma sens, ponieważ portu resetuje null), ale ta sztuczka nie ma ogólnego przeznaczenia.

-2

spróbować

window.frameElement.ownerDocument.domain 
5

Zamiast odnośnika zwrotnego, można zaimplementować window.postMessage komunikować accross IFRAMES/Windows między domenami.
Publikujesz w window.parent, a następnie rodzic zwraca adres URL.
To działa, ale wymaga komunikacji asynchronicznej.
Będziesz musiał napisać synchroniczne opakowanie po metodach asynchronicznych, jeśli potrzebujesz go synchronicznie.

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

Ładowanie elementu iframe podrzędnego nie będzie działać w środowisku trybu mieszanego. Na przykład strona główna w https i strona podrzędna w elemencie iframe (http). – lmiguelmh

+0

@lmiguelmh: Prawidłowo - w przeciwnym razie byłby to błąd związany z bezpieczeństwem, a przeglądarka musiałaby zostać naprawiona. Co można zrobić w tym scenariuszu jest A) Umieszczenie strony podrzędnej w https, B) post-postu z iframe na stronie https, na stronie https masz gniazda internetowe, które otrzymają powiadomienie, jeśli post-post dotrze do serwer. Alternatywnie sonduj w odstępie x sekund, czy przybyły nowe dane. Jeśli przypisujesz postowi guid, to dziecko może JSONP-ankietować stronę https (która powinna być dozwolona), prosząc o odpowiedź przez guid - poll aż do jej otrzymania. Nie wiem, czy gniazda internetowe mogą być używane w programie. –

Powiązane problemy