jQuery / JavaScript: accéder au contenu d'une iframe

j'aimerais manipuler le HTML dans une iframe en utilisant jQuery.

j'ai pensé que je pourrais le faire en définissant le contexte de la fonction jQuery pour être le document de l'iframe, quelque chose comme:

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

Cependant, cela ne semble pas fonctionner. Un peu d'inspection me montre que les variables de frames['nameOfMyIframe'] sont undefined à moins que j'attende un peu que l'iframe se charge. Toutefois, lorsque l'iframe charge les variables ne sont pas accessible (j'obtiens des erreurs de type permission denied ).

est-ce que quelqu'un connaît une solution à ce problème?

728
demandé sur Druzion 2008-12-13 10:20:34

11 réponses

je pense que ce que vous faites est assujetti à la même politique d'origine . Cela devrait être la raison pour laquelle vous obtenez type de permission refusée erreurs.

355
répondu Onur Bebin 2008-12-13 14:14:03

si le <iframe> provient du même domaine, les éléments sont facilement accessibles en tant que

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

référence

938
répondu Yasir Laghari 2015-07-30 17:51:05
$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});
78
répondu davryusha 2010-04-02 18:27:46

Si l'iframe src est d'un autre domaine, vous pouvez encore le faire. Vous devez lire la page externe dans PHP et y faire écho depuis votre domaine. Comme ceci:

iframe_page.php

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

    $domain = file_get_contents($URL)

    echo $domain
?>

puis quelque chose comme ceci:

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>

ce qui précède est un exemple de comment éditer une page externe à travers une iframe sans accès refusé etc...

41
répondu basysmith 2010-06-27 10:15:18

Utiliser

iframe.contentWindow.document

au lieu de

iframe.contentDocument
30
répondu user 2015-07-30 19:15:50

je trouve cette façon de nettoyant:

var $iframe = $("#iframeID").contents();
$iframe.find('selector');
28
répondu zupa 2017-01-06 12:00:29

vous devez attacher un événement au handler onload d'une iframe, et exécuter le js là-dedans, de sorte que vous vous assurez que l'iframe a terminé le chargement avant d'y accéder.

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

ce qui précède résoudra le problème 'pas encore chargé', mais en ce qui concerne les permissions, si vous chargez une page dans l'iframe qui est à partir d'un domaine différent, vous ne serez pas en mesure d'y accéder en raison de restrictions de sécurité.

25
répondu Andreas Grech 2008-12-13 08:22:16

Vous pouvez utiliser la fenêtre.postMessage pour appeler une fonction entre page et son iframe (cross domain ou pas).

Documentation

de la 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>
19
répondu B.Asselin 2016-02-26 15:38:04

je préfère utiliser une autre variante pour accéder. De parent vous pouvez avoir un accès à la variable dans iframe enfant. $ est une variable aussi et vous pouvez recevoir l'accès à son appel juste window.iframe_id.$

par exemple, window.view.$('div').hide() - cacher toutes les divs dans iframe avec id 'view'

mais, ça ne marche pas en FF. Pour une meilleure compatibilité, vous devez utiliser

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

4
répondu Evgeny Karpov 2013-12-29 22:37:11

je crée un exemple de code . Maintenant, vous pouvez facilement comprendre à partir de différents domaines, vous ne pouvez pas accéder le contenu de l'iframe .. Même domaine, nous pouvons accéder au contenu iframe

je te partage mon code , s'il te plaît exécute ce code vérifiez la console . J'imprime l'image src à la console. Il y a quatre iframe , deux iframe provenant du même domaine et deux autres provenant d'un autre domaine(tiers) .Vous pouvez voir deux images src ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

et

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) à la console et peut également voir deux erreurs de permission( Deux Erreur: Permission refusée pour accéder à la propriété 'document '

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

) qui provient d'iframe tiers.

<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
répondu Zisu 2015-09-24 09:29:04

avez-vous essayé le classic, en attendant que la charge soit complète en utilisant la fonction builtin ready de jQuery?

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

K

0
répondu Khb 2008-12-13 08:06:29