¿Cómo acceder a la página principal de iFrame usando jquery?

267

Tengo un iframe y para acceder al elemento padre implementé el siguiente código:

window.parent.document.getElementById('parentPrice').innerHTML

¿Cómo obtener el mismo resultado usando jquery?
ACTUALIZACIÓN : ¿O cómo acceder a la página principal de iFrame usando jquery?

Amr Elgarhy
fuente
Ver también stackoverflow.com/questions/12114243/…
Alexis Wilke el

Respuestas:

489

Para encontrar en el padre del iFrame use:

$('#parentPrice', window.parent.document).html();

El segundo parámetro para el contenedor $ () es el contexto en el que buscar. Esto predeterminado al documento.

Pim Jager
fuente
18
Genial: reconociste las gracias antes de que te agradeciera. ¿StackOverflow tiene problemas con las zonas horarias?
belugabob
21
También puede hacer: $ (window.parent.document) .find ("# parentPrice"). Html ();
jhorback
@belugabob Es culpa de un hechicero.
Erik Escobedo
1
Para aquellos que lanzaron un windoid con window.open, no se olviden de ese viejo estándar JS window.opener.document. $ ("# someDiv", window.opener.document) funciona.
jjohn
2
Esto solo funcionará si la fuente del iframe tiene jQuery cargado. En mi experiencia, la fuente del iframe no tendría jQuery, pero a menudo se necesita la necesidad de llamar a una de las funciones jQuery de los padres. Para hacer esto, use: window.document. $ ("# ParentPrice"). Html () Esta fue la respuesta que Álvaro G. Vicario publicó.
David Kinkead
39

cómo acceder a la página principal de iFrame usando jquery

window.parent.document.

jQuery es una biblioteca sobre JavaScript, no es un reemplazo completo para ella. No tiene que reemplazar cada última expresión de JavaScript con algo relacionado con $.

bobince
fuente
66
+1. jQuery es genial, pero muchas respuestas a problemas simples parecen ser 'usar jQuery'. Si de todos modos está cargando la biblioteca, está bien, pero no la cargue una tarea. Además, las personas parecen preocupadas por JS perf, luego usan una API encima de JS para hacer las cosas fácilmente posibles (y posiblemente más rápido) sin la API.
Grant Wagner el
1
@Grant Aunque sueño con que jQuery se convierta en código nativo dentro de los navegadores.
Dan Blows
3
@Blowski: esa es mi pesadilla! jQuery contiene una gran cantidad de código extremadamente complejo y frágil de "haz lo que quiero decir" que sería completamente inapropiado poner en una API oficial.
bobince
1
@bobince: Claramente, siempre debe reemplazar todo Javascript con jQuery. Es como el tocino; No hay situación en la que menos sea mejor. ;)
MW.
2
El OP ya tenía window.parent.document, por lo que esto no respondió nada. E imagine que la lógica del selector es mucho más compleja que la ID de un elemento, una situación en la que jQuery es muy útil. Siento que la pregunta es "¿cómo digo 'hola' en francés?" y esta respuesta es "hablar alemán".
grantwparks
13

Si necesita encontrar la instancia de jQuery en el documento principal (por ejemplo, para llamar a una función de utilidad proporcionada por un complemento), use una de estas sintaxis:

  • window.parent.$
  • window.parent.jQuery

Ejemplo:

window.parent.$.modal.close();

jQuery se adjunta al windowobjeto y eso es lo que window.parentes.

Álvaro González
fuente
Estoy usando mi iframe como un control de usuario. Esto me permite mantenerlo limpio y agradable.
Dan Randolph
11

Puede acceder a los elementos de la ventana principal desde un iframe utilizando window.parenteste método :

// using jquery    
window.parent.$("#element_id");

Que es lo mismo que:

// pure javascript
window.parent.document.getElementById("element_id");

Y si tiene más de un iframes anidados y desea acceder al iframe superior, puede usarlo window.topasí:

// using jquery
window.top.$("#element_id");

Que es lo mismo que:

// pure javascript
window.top.document.getElementById("element_id");
Amr
fuente
7

en la ventana principal poner:

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

y en el archivo src iframe poner:

<script>window.parent.ifDoneChildFrame('Your value here');</script>
stieven
fuente
5

Sí, a mí también me funciona.

Nota: necesitamos usar window.parent.document

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });
Yogesh Gandhi
fuente
5

Me está funcionando con un pequeño giro. En mi caso, tengo que completar el valor de POPUP JS a la forma de VENTANA DE PADRES.

Entonces he usado $('#ee_id',window.opener.document).val(eeID);

¡¡¡Excelente!!!

Hitesh Patel
fuente
3

Puede que sea un poco tarde para el juego aquí, pero acabo de descubrir este fantástico complemento jQuery https://github.com/mkdynamic/jquery-popupwindow . Básicamente utiliza un evento de devolución de llamada onUnload, por lo que básicamente escucha el cierre de la ventana secundaria y realizará cualquier cosa necesaria en ese punto. Por lo tanto, realmente no hay necesidad de escribir ningún JS en la ventana secundaria para pasar al padre.

cj5
fuente
1

Hay varias formas de hacer esto.

I) Obtenga el padre principal directamente.

para exa. quiero reemplazar mi página secundaria para iframe entonces

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

aquí top.location obtiene padre directamente.

II) conseguir padre uno por uno,

var element = $('.iframe:visible', window.parent.document);

aquí si tiene más de un iframe, especifique uno activo o visible.

también puedes hacer esto para conseguir más padres,

var masterParent = element.parent().parent().parent()

III) obtener padre por identificador.

var myWindow = window.top.$("#Identifier")
Bharat
fuente