2009-09-04 1 views
28

Мне нужно получить доступ к URL родительского домена из моего iframe, который находится в другом домене.Как реализовать Cross Domain URL Access из iframe с помощью Javascript?

Например, «example.com» - это мой сайт с IFrame из другого родительского домена, например «google.com». Здесь мне нужно получить доступ к URL родительского домена с моего example.com. То есть, мне нужно получить URL-адрес «google.com» в моем домене «example.com». Более того, родительский домен не может быть жестко закодирован.

То, что я пытался использовал следующий код:

window.parent.location.href() 

, но это приводит ошибка доступа. Как я могу реализовать это правильно, чтобы достичь этого?

ответ

13

Возможно, вы захотите взглянуть на эти вопросы/ответы; они могли бы дать вам некоторую информацию относительно вашей проблемы:

Чтобы сделать короче: доступ к IFRAME из другого домена, не представляется возможным, по соображениям безопасности - что объясняет сообщение об ошибке, которое вы получаете.


Same origin policy страница на википедии приносит некоторую информацию о том, что меры безопасности:

В двух словах, политика позволяет скрипты, работающие на страницах, происходящих с того же сайта для доступа к методам друг друга и свойства без ограничений - но предотвращает доступ к большинству методов и свойств через страницы на разных сайтах.

Строгое разделение между содержанием , предоставленного неродственными сайтами должно быть поддерживается на стороне клиента, чтобы предотвратить потери конфиденциальности данных или целостность.

33

Вы можете попробовать и проверить на реферера, который должен быть родительский сайт, если вы являетесь IFrame

вы можете сделать это так:

var href = document.referrer; 
+0

Это работает только когда вы открываете IFRAME в первый раз. Если вы перемещаетесь внутри iframe, предыдущей страницей будет ссылка. – Marco

1

У вас есть несколько варианты:

  1. Scope область вниз (см document.domain) как содержащей страницы и iframe к тому же го ING. Тогда они не будут связаны ограничениями «того же происхождения».

  2. Используйте postMessage, поддерживаемый всеми браузерами HTML5 для связи cross-domain.

0

Хорошая статья здесь: Cross-domain communication with iframes

Также вы можете непосредственно установить document.domain одинакова в обоих кадрах (даже

document.domain = document.domain; 

код имеет смысл, потому что сбрасывает порт нулевое значение), но этот трюк не является универсальным.

-2

попробовать

window.frameElement.ownerDocument.domain 
5

Вместо того, чтобы использовать реферера, вы можете реализовать window.postMessage общаться accross IFrames/окна в разных доменах.
Вы отправляете в window.parent, а затем родитель возвращает URL-адрес.
Это работает, но требует асинхронной связи.
Вам потребуется написать синхронную оболочку вокруг асинхронных методов, если вам это нужно синхронно.

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

Загрузка дочернего iframe не будет работать в среде смешанного режима. Например, главная страница в https и дочерняя страница в iframe (http). – lmiguelmh

+0

@lmiguelmh: Правильно - если бы это было так, это было бы ошибкой безопасности, и браузеру понадобилось бы исправление. Что вы можете сделать в этом сценарии: A) Ввод дочерней страницы в https, B) form-post из iframe на страницу https, на странице https у вас есть веб-сокеты, которые получают уведомление, если сообщение формы отправляется на сервер. В качестве альтернативы опросите в интервале х секунд, появились ли новые данные. Если вы назначаете post a guid, то ребенок может JSONP-опросить страницу https (что должно быть разрешено), прося ответа на запрос с помощью guid-poll до тех пор, пока он не получит его. Не знаю, можно ли использовать веб-сокеты вThatCase. –