¿<iframe> DOM de acceso javascript padre a través de dominios?
cross-domain (5)
Es posible.
Tenías razón al mencionar postMessage en tus ediciones. Para aquellos que buscan, existe una excelente manera de comunicarse entre dominios, solo compatible con javascript. Código corto y fácil también. ¿Solución perfecta? Siempre que pueda solicitar modificaciones al padre y al hijo:
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Controlo el contenido de un iframe que está incrustado en una página de otro dominio. ¿Hay alguna forma para que javascript en mi iframe realice cambios en el DOM del padre?
Por ejemplo, me gustaría que mi secuencia de comandos iframed agregue un grupo de elementos html al DOM primario. Esto parece una orden bastante alta - ¿pensamientos?
Edición: existe una técnica llamada " Fragment ID Messaging " que podría ser una forma de comunicación entre iframes de dominios cruzados.
Edit: Además, Firefox 3.5, Opera, Chrome (etc.) parecen estar adoptando el api html5 "postMessage" , que permite la transmisión segura de datos entre dominios entre marcos, iframes y ventanas emergentes. Funciona como un sistema de eventos. IE8 es compatible con esta función, al parecer, lo que quizás sea un poco sorprendente.
Resumen: No, no puede acceder / editar directamente el DOM de una página desde otro dominio. Pero puede comunicarse con él y puede cooperar para realizar los cambios que desee.
Odio decirlo, pero estoy seguro al 99% de que no está sucediendo directamente por seguridad.
Puedes probarlo here .
bhh
Para AJAX, el servidor podría devolver el encabezado Access-Control-Allow-Origin: * para permitir el acceso a varios dominios. Tal vez funcione también para IFRAME.
Sí tu puedes.
Puede implementar window.postMessage para comunicarse a través de iframes y / o ventanas a través de dominios.
Pero hay que hacerlo de forma asíncrona.
Si lo necesita de forma sincrónica, debe implementar envolturas alrededor de esos métodos asíncronos.
<!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://.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>
Niño.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>
Aquí, modificaría el hijo para enviar mensajes de texto a los padres. por ejemplo, en child.htm, haces
window.parent.postMessage("alert(document.location.href); document.location.href = ''http://www.google.com/ncr''", "*");
y en padre, usted hace (en receiveMessage) eval(evt.data); No es que el uso de eval no sea seguro, por lo que debería pasar una enumeración y llamar a la función correspondiente que necesita colocar en la página principal.
Supongo que tendrá problemas de seguridad sin usar un proxy. Los proxies pueden ser muy útiles. Puedes probar uno de esos
(1) un proxy basado en PHP (tenga cuidado porque hay muchos anuncios entre enlaces útiles)
(2) un proxy .htaccess de Apache: simplemente cree un subdirectorio en su dominio y coloque un archivo .htaccess que contenga:
RewriteEngine on
RewriteRule ^(.*)$ http://picasaweb.google.com/$1 [P,L]
Coloque el otro nombre de dominio en lugar de picasaweb.google.com
Personalmente prefiero usar el proxy de Apache