Pregunta jQuery / JavaScript: acceder a los contenidos de un iframe


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

Pensé que sería capaz de hacer esto al establecer el contexto de la función jQuery como 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'] son undefined a menos que espere un momento para que cargue el iframe. Sin embargo, cuando el iframe se carga, las variables no son accesibles (obtengo permission deniedtipo de errores).

¿Alguien sabe de una solución a esto?


713
2017-12-13 07:20


origen


Respuestas:


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


350
2017-12-13 08:25



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

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

Referencia 


928
2017-10-28 18:54



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

78
2018-04-02 18:27



Si el iframe src es de otro dominio, puede hacerlo. Necesita 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:

display_page.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 acceso denegado, etc.


41
2018-06-27 10:15



Utilizar

iframe.contentWindow.document

en lugar de

iframe.contentDocument

29
2017-12-02 10:20



Encuentro esta manera más limpia:

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

28
2017-08-03 19:17



Debe adjuntar un evento al controlador de carga de un iframe y ejecutar el js allí, de modo que se asegure 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 "aún no cargado", pero en lo que respecta a los permisos, si está cargando una página en el iframe que proviene de un dominio diferente, no podrá acceder a ella debido a restricciones de seguridad.


25
2017-12-13 08:11



Puede usar window.postMessage para llamar a una función entre la página y su iframe (dominio cruzado o no).

Documentación

page.html

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

18
2018-02-02 14:34



Prefiero usar otra variante para acceder. Desde el padre, puede tener acceso a la variable en el iframe hijo. $ es una variable también y puede recibir acceso a su llamada window.iframe_id.$

Por ejemplo, window.view.$('div').hide() - ocultar todos los divs en iframe con id 'ver'

Pero, no funciona en FF. Para una mejor compatibilidad, debe usar

$('#iframe_id')[0].contentWindow.$


4
2017-09-02 15:21



Creo un código de muestra. Ahora puedes entender fácilmente desde diferentes dominios a los que no puedes acceder contenido de iframe .. Mismo dominio podemos acceder al contenido de iframe

Te comparto mi código, ejecuta este código revisa la consola. Imprimo image src en la consola. Hay cuatro iframe, dos iframe procedentes del mismo dominio y otros dos de otro dominio (tercero). Puede ver dos imágenes src ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

y

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif  )  en la consola y también puede ver dos errores de permiso ( 2 Error: Permiso denegado para acceder a la propiedad 'documento'

... irstChild)}, contents: function (a) {return m.nodeName (a, "iframe")? a.contentDocument ...

) que proviene de un iframe de terceros.

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>

2
2017-09-24 09:29



¿Has probado el clásico, esperando a que se complete la carga con la función integrada de jQuery?

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

K


0
2017-12-13 08:06