¿Cómo puedo acceder al contenido de un iframe con JavaScript/jQuery?

6 minutos de lectura

¿Como puedo acceder al contenido de un iframe con JavaScriptjQuery
rz.

Me gustaría manipular el HTML dentro de un iframe usando jQuery.

Pensé que podría hacer esto configurando el contexto de la función jQuery para que sea el documento del iframe, algo así como:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

Sin embargo, esto no parece funcionar. Un poco de inspección me muestra que las variables en frames['nameOfMyIframe'] están undefined a menos que espere un tiempo para que se cargue el iframe. Sin embargo, cuando se carga el iframe, las variables no son accesibles (obtengo permission denied-errores de tipo).

¿Alguien sabe de una solución a esto?

  • ¿Qué contiene el iFrame? ¿Su src está configurado en otro dominio?

    – Jaime

    14 de diciembre de 2008 a las 0:32

  • si es otro dominio, ¿todavía hay alguna forma de acceder a su contenido o registrar un evento?

    – adardesign

    1 de octubre de 2009 a las 15:59

  • No, porque eso sería cross-site scripting, lo cual está prohibido por razones de seguridad. Mi solución fue usar un proxy: alimentar el HTML en el IFRAME palabra por palabra a través de mi propio sitio para que ya no sea un sitio cruzado desde la perspectiva del navegador.

    – reinierpost

    6 de abril de 2010 a las 8:10

  • Es más multi-navegador para usar .contentWindow.document que .document sobre el iframe elemento. Sugeriré el cambio anterior.

    – alan h.

    8 de julio de 2011 a las 20:04

  • una forma son las extensiones de Chrome

    – Muhammad Umer

    16 de abril de 2013 a las 13:14

1647631448 467 ¿Como puedo acceder al contenido de un iframe con JavaScriptjQuery
Yasir Laghari

Si el <iframe> es del mismo dominio, los elementos son fácilmente accesibles como

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Referencia

  • Conocer la misma política de origen es excelente, pero esta es la respuesta que hace lo que quería el OP. ¿Por qué la otra respuesta fue elegida como la correcta?

    – Jason Swett

    24 de noviembre de 2010 a las 15:53

¿Como puedo acceder al contenido de un iframe con JavaScriptjQuery
Onur Bebin

Creo que lo que estás haciendo está sujeto a la política del mismo origen. Esta debería ser la razón por la que estás recibiendo tipo de permiso denegado errores

  • @Tracker1: ¿Puede sugerir algún marco/api/patrón de diseño para implementar esta solución de proxy? ¿Algún enlace a un ejemplo o tutorial, etc.? He intentado buscar pero no he podido encontrar ninguno.

    – Ümer Hayat

    27 de junio de 2012 a las 12:26

1647631448 766 ¿Como puedo acceder al contenido de un iframe con JavaScriptjQuery
davryusha

podrías usar .contents() método de jQuery.

los .contents() El método también se puede usar para obtener el documento de contenido de un iframe, si el iframe está en el mismo dominio que la página principal.

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});

1647631449 20 ¿Como puedo acceder al contenido de un iframe con JavaScriptjQuery
basysmith

Si el iframe src es de otro dominio, aún puede hacerlo. Debe leer la página externa en PHP y repetirla desde su dominio. Me gusta esto:

iframe_page.php

<?php
    $URL = "http://external.com";

    $domain = file_get_contents($URL);

    echo $domain;
?>

Entonces algo como esto:

mostrar_pagina.html

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

Lo anterior es un ejemplo de cómo editar una página externa a través de un iframe sin el acceso denegado, etc.

1647631449 36 ¿Como puedo acceder al contenido de un iframe con JavaScriptjQuery
usuario

Utilizar

iframe.contentWindow.document

en lugar de

iframe.contentDocument

  • Gran respuesta. Esto funciona para iFrames en otros dominios. Probé esto en la consola en Safari y Firefox.

    – Aneil Mallavarapu

    27 de diciembre de 2010 a las 0:04


  • Creo que solo funcionará para otros dominios si lo hace desde la consola. Desde un script no se permitirá el acceso.

    – yincrash

    31 de mayo de 2011 a las 15:58

  • Esta debería ser la respuesta aceptada. Salvó mi vida y trabajo cuando el iframe es de un dominio diferente; aunque como se mencionó, solo en la consola.

    – fuego de seda

    26 de febrero de 2014 a las 8:47


  • para mí iframe.contentWindow.document no siempre funciona. y cuando no es así, encontré que $(elem).contents().get(0) sí

    – elewinso

    22 de noviembre de 2018 a las 13:02

  • puede elegir el “documento raíz” en la consola del navegador. Cuando selecciona “superior”, no funcionará, como un acceso de origen cruzado. Si elige acceder en nombre del documento iframe, por supuesto que le dará acceso. Solo porque no eres un navegador, sino el propietario del navegador.

    – Serguéi Kovalenko

    3 de septiembre de 2019 a las 7:34

Encuentro esta manera más limpia:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

  • Gran respuesta. Esto funciona para iFrames en otros dominios. Probé esto en la consola en Safari y Firefox.

    – Aneil Mallavarapu

    27 de diciembre de 2010 a las 0:04


  • Creo que solo funcionará para otros dominios si lo hace desde la consola. Desde un script no se permitirá el acceso.

    – yincrash

    31 de mayo de 2011 a las 15:58

  • Esta debería ser la respuesta aceptada. Salvó mi vida y trabajo cuando el iframe es de un dominio diferente; aunque como se mencionó, solo en la consola.

    – fuego de seda

    26 de febrero de 2014 a las 8:47


  • para mí iframe.contentWindow.document no siempre funciona. y cuando no es así, encontré que $(elem).contents().get(0) sí

    – elewinso

    22 de noviembre de 2018 a las 13:02

  • puede elegir el “documento raíz” en la consola del navegador. Cuando selecciona “superior”, no funcionará, como un acceso de origen cruzado. Si elige acceder en nombre del documento iframe, por supuesto que le dará acceso. Solo porque no eres un navegador, sino el propietario del navegador.

    – Serguéi Kovalenko

    3 de septiembre de 2019 a las 7:34

Debe adjuntar un evento al controlador de carga de un iframe y ejecutar el js allí, para asegurarse de que el iframe haya terminado de cargarse antes de acceder a él.

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

Lo anterior resolverá el problema de ‘todavía no cargado’, pero en cuanto a los permisos, si está cargando una página en el iframe que es de un dominio diferente, no podrá acceder a ella debido a restricciones de seguridad.

  • esta es una buena idea, de hecho lo estaba intentando tal como respondiste. Sin embargo, no soluciona el permiso denegado (sí soluciona el hecho de que tengo que esperar antes de comenzar a acceder a las cosas del iframe)

    – rz.

    13 de diciembre de 2008 a las 8:16

  • en realidad… no importa, parece que la espera aún es necesaria incluso cuando se hace esto.

    – rz.

    13 de diciembre de 2008 a las 8:20

  • La función listo funciona. Sin embargo, parece que no espera a que el contenido del iframe termine de cargarse, solo para el documento principal, incluso cuando se invoca en el contenido del iframe. Me imagino que también es por la misma política de origen.

    – rz.

    14 de diciembre de 2008 a las 23:15

  • Un par de notas sobre este código: debe usar iframe.contentDocument en lugar de .document, y debe usar .load() en lugar de .ready() para evitar la espera. (No perfecto, pero mejor)

    –Rodrigo Queiro

    27 de julio de 2009 a las 22:55

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad