javascript - acceder a un elemento dentro de un iframe jquery
Llamar a una función de ventana principal desde un iframe (10)
Window.postMessage ()
Este método permite con seguridad la comunicación de cross-origin .
Y si tiene acceso al código de la página principal, entonces se puede llamar a cualquier método principal, así como a cualquier información que se pueda pasar directamente desde Iframe . Aquí hay un pequeño ejemplo:
Página principal:
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}
Código iframe:
window.parent.postMessage({
''func'': ''parentFunc'',
''message'': ''Message text from iframe.''
}, "*");
Referencias:
Quiero llamar a una función de JavaScript de la ventana principal desde un iframe.
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
Con Firefox y Chrome puedes usar:
<a href="whatever" target="_parent" onclick="myfunction()">
Si mi función está presente tanto en iframe como en padre, se llamará al padre.
He publicado esto como una respuesta por separado, ya que no está relacionada con mi respuesta existente.
Este problema recientemente surgió nuevamente para acceder a un padre desde un iframe que hace referencia a un subdominio y las correcciones existentes no funcionaron.
Esta vez la respuesta fue modificar el document.domain de la página principal y el iframe para que sea el mismo. Esto engañará a las mismas verificaciones de la política de origen para que piensen que coexisten exactamente en el mismo dominio (los subdominios se consideran un host diferente y fallan la misma comprobación de la política de origen).
Inserte lo siguiente en el <head> de la página en el iframe para que coincida con el dominio principal (ajuste para su doctype).
<script>
document.domain = "mydomain.com";
</script>
Tenga en cuenta que esto generará un error en el desarrollo de localhost, así que use una comprobación como la siguiente para evitar el error:
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
La solución dada por Ash Clarke para subdominios funciona muy bien, pero tenga en cuenta que debe incluir document.domain = "mydomain.com"; tanto en el encabezado de la página iframe como en el encabezado de la página principal, como se indica en el enlace Verificaciones de la misma política de origen
Una extensión importante de la misma política de origen implementada para el acceso a DOM de JavaScript (pero no para la mayoría de los otros tipos de comprobaciones del mismo origen) es que dos sitios que comparten un dominio de nivel superior común pueden optar por comunicarse a pesar de fallar el "mismo host" verifique estableciendo mutuamente sus respectivas propiedades de DOM de document.domain en el mismo fragmento calificado de la derecha de su nombre de host actual. Por ejemplo, si http://en.example.com/ y http://fr.example.com/ ambos establecen document.domain en "example.com", serían desde ese punto en el mismo origen considerado para el propósito de la manipulación de DOM.
Otra adición para quienes la necesiten. La solución de Ash Clarke no funciona si están usando protocolos diferentes, así que asegúrese de que si está usando SSL, su iframe también esté usando SSL o interrumpirá la función. Su solución funcionó para los dominios en sí, así que gracias por eso.
Puedes usar
window.top
Vea lo siguiente.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>
Recientemente tuve que descubrir por qué esto no funcionó también.
El javascript al que desea llamar desde el iframe secundario debe estar en la cabeza del padre. Si está en el cuerpo, el script no está disponible en el ámbito global.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>
Espero que esto ayude a cualquiera que tropiece con este tema de nuevo.
Si bien algunas de estas soluciones pueden funcionar, ninguna de ellas sigue las mejores prácticas. Muchos asignan variables globales y puede que te encuentres haciendo llamadas a múltiples variables o funciones principales, lo que lleva a un espacio de nombres desordenado y vulnerable.
Para evitar esto, use un patrón de módulo. En la ventana principal:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);
Luego, en el iframe:
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};
Esto es similar a los patrones descritos en el capítulo Herencia del texto seminal de Crockford, "Javascript: The Good Parts". También puede obtener más información en la página de w3 para conocer las mejores prácticas de Javascript. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals
parent.abc () solo funcionará en el mismo dominio por motivos de seguridad. Probé esta solución y la mía funcionó perfectamente.
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById(''myFrame'').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>
Espero que esto ayude. :)
<a onclick="parent.abc();" href="#" >Call Me </a>
Ver window.parent
Devuelve una referencia al elemento principal de la ventana o subtrama actual.
Si una ventana no tiene un elemento primario, su propiedad principal es una referencia a sí misma.
Cuando una ventana se carga en un <iframe> , <object> o <frame> , su ventana principal es la ventana con el elemento que incrusta la ventana.