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?
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.
si le <iframe> provient du même domaine, les éléments sont facilement accessibles en tant que
$("#iFrame").contents().find("#someDiv").removeClass("hidden");
$(document).ready(function(){
$('#frameID').load(function(){
$('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
});
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...
Utiliser
iframe.contentWindow.document
au lieu de
iframe.contentDocument
je trouve cette façon de nettoyant:
var $iframe = $("#iframeID").contents();
$iframe.find('selector');
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é.
Vous pouvez utiliser la fenêtre.postMessage pour appeler une fonction entre page et son iframe (cross domain ou pas).
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>
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.$
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>
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