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


Je voudrais manipuler le HTML dans un iframe en utilisant jQuery.

Je pensais que je serais capable de le faire en mettant le contexte de la fonction jQuery à ê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 dans frames['nameOfMyIframe'] sont undefined sauf si j'attends un moment pour que l'iframe se charge. Cependant, lorsque le iframe charge les variables ne sont pas accessibles (je reçois permission denied-type d'erreurs).

Est-ce que quelqu'un sait d'un travail autour de cela?


713
2017-12-13 07:20


origine


Réponses:


Je pense que ce que vous faites est soumis à la même politique d'origine. Cela devrait être la raison pour laquelle vous obtenez type d'autorisation refusé les erreurs.


350
2017-12-13 08:25



Si la <iframe> est du même domaine, les éléments sont facilement accessibles

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

Référence 


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 le iframe src provient d'un autre domaine, vous pouvez toujours le faire. Vous devez lire la page externe en PHP et la renvoyer depuis votre domaine. Comme ça:

iframe_page.php

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

    $domain = file_get_contents($URL)

    echo $domain
?>

Alors quelque chose comme ça:

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 via un iframe sans l'accès refusé, etc ...


41
2018-06-27 10:15



Utilisation

iframe.contentWindow.document

au lieu de

iframe.contentDocument

29
2017-12-02 10:20



Je trouve cela plus propre:

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

28
2017-08-03 19:17



Vous devez attacher un événement au gestionnaire onload d'iframe, et y exécuter le js, afin de vous assurer que l'iframe a fini de charger 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 autorisations, si vous chargez une page dans l'iframe provenant d'un domaine différent, vous ne pourrez pas y accéder en raison de restrictions de sécurité.


25
2017-12-13 08:11



Vous pouvez utiliser window.postMessage pour appeler une fonction entre la page et son iframe (cross domain ou non).

Documentation

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



Je préfère utiliser d'autres variantes 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 tous les divs dans iframe avec id 'view'

Mais, cela ne fonctionne pas dans FF. Pour une meilleure compatibilité, vous devez utiliser

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


4
2017-09-02 15:21