2009-09-04 37 views
28

Necesito acceder a la URL del dominio principal de mi iframe, que está en otro dominio.¿Cómo implemento Cross Domain URL Access desde un Iframe usando Javascript?

Por ejemplo, "example.com" es mi sitio web que tiene un Iframe de otro dominio principal, como "google.com". Aquí necesito acceder a la URL del dominio principal desde mi example.com. Es decir, necesito obtener la URL "google.com" en mi dominio "example.com". Además, el dominio principal no puede ser codificado.

Lo que intenté fue usando el siguiente código:

window.parent.location.href() 

pero esto da lugar a error de acceso denegado. ¿Cómo implemento esto correctamente para lograr esto?

Respuesta

13

Es posible que desee echar un vistazo a estas preguntas/respuestas; que podría darle algunas informaciones relativas a su problema:

Para hacer las cosas corta: el acceso iframe de otro dominio no es posible, por razones de seguridad - que explica el mensaje de error que está recibiendo.


La página Same origin policy en la wikipedia trae un poco de información sobre esta medida de seguridad:

En pocas palabras, la política permite secuencias de comandos que se ejecutan en páginas originarias desde el mismo sitio para tener acceso a los métodos de cada uno y propiedades sin restricciones específicas, pero impide el acceso a la mayoría de los métodos y propiedades en páginas de sitios diferentes.

una estricta separación entre el contenido proporcionada por sitios no relacionados debe mantiene en el lado del cliente para evitar la pérdida de confidencialidad de datos o integridad.

33

Usted puede probar y comprobar la árbitro, que debe ser el sitio principal si eres un iframe

puede hacerlo de esta manera:

var href = document.referrer; 
+0

Esto sólo funciona cuando se abre el marco flotante por primera vez. Si navega dentro del iframe, la página anterior será el referente. – Marco

1

usted tiene un par de opciones:

  1. Alcance del dominio hacia abajo (ver document.domain) tanto en la página que contiene y la iframe a la misma º En g. Entonces no estarán sujetos a restricciones de 'mismo origen'.

  2. Utilice postMessage, que es compatible con todos los navegadores HTML5 para la comunicación cross-domain.

0

Buen artículo aquí: Cross-domain communication with iframes

También se puede fijar directamente document.domain el mismo en ambos marcos (incluso

document.domain = document.domain; 

código tiene sentido porque el puerto se restablece a NULL), pero este truco no es de propósito general.

-2

tratar

window.frameElement.ownerDocument.domain 
5

En lugar de utilizar la de referencia, se puede implementar window.postMessage para comunicarse iframes cruzando/ventanas a través de dominios.
Publicas en window.parent, y luego parent devuelve la URL.
Esto funciona, pero requiere comunicación asíncrona.
Tendrá que escribir un contenedor síncrono alrededor de los métodos asíncronos, si lo necesita sincrónico.

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

La carga del iframe hijo no va a funcionar en un entorno de modo mixto. Por ejemplo, la página principal en https y la página secundaria en un iframe (http). – lmiguelmh

+0

@lmiguelmh: Correcto - si fuera necesario, eso sería un error de seguridad y el navegador necesitaría ser arreglado. Lo que podría hacer en este escenario es A) Colocar la página secundaria en https, B) formulario desde el iframe a la página https, en la página https tiene sockets web que reciben una notificación si llega un formulario al sitio servidor. Alternativamente sondee en un intervalo de x segundos si han llegado nuevos datos. Si le asigna una orientación a la publicación, el niño puede realizar una encuesta JSONP en la página https (eso debe permitirse), y solicitar la respuesta mediante la encuesta de orientación hasta que la obtenga. No sé si los sockets web podrían usarse en ThatCase. –

Cuestiones relacionadas