Comment accéder au contenu d'une iframe avec jQuery?

116

Comment puis-je accéder au contenu d'une iframe avec jQuery? J'ai essayé de faire ça, mais ça ne marcherait pas:

contenu iframe: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

Comment puis-je y accéder myContent?

Similaire à jquery / javascript: accéder au contenu d'une iframe mais la réponse acceptée n'est pas celle que je recherchais.

jquery iframe mbillard
la source
Je viens de découvrir que la variable $ intégrée dans la console Firefox ne ressemble pas du tout à un jQuery complet. (J'ai compris cela après avoir réalisé que je n'avais pas non plus la variable jQuery, puis j'ai compris que je n'avais pas chargé le code source de jQuery).
eel ghEEz

Réponses:

214

Vous devez utiliser la contents()méthode:

$("#myiframe").contents().find("#myContent")

Source: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Doc API: https://api.jquery.com/contents/

mbillard
la source
3
donnez-moi une erreur: Erreur: Autorisation refusée d'accéder à la propriété 'ownerDocument'
Imran Khan
26
ime: Cela vous donne probablement une erreur pour les raisons suivantes: 1) Iframe n'appartient pas au même domaine. 2) Vous essayez de le lire avant l'événement de chargement Iframe.
iMatoria
1
Existe-t-il un moyen de vérifier si le contenu iframe provient du même domaine, avant d'essayer d'y accéder et d'obtenir une erreur?
Kamafeather
2
L'URL source est cassée.
karthzDIGI
1
@jperezmartin: Vous devrez utiliser une bibliothèque javascript qui transférera les informations entre la page principale et l'iframe. Fondamentalement, il a été refusé par le navigateur en raison de la fonctionnalité Cross Browser. Je suis désolé, je ne connais aucune bibliothèque de ce type car je n'en ai jamais eu besoin.
iMatoria
21 
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>
andres descalzo
la source
15

Si la source d'iframe est un domaine externe, les navigateurs masqueront le contenu de l'iframe (même politique d'origine). Une solution de contournement consiste à enregistrer le contenu externe dans un fichier, par exemple (en PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

puis, récupérez le nouveau contenu du fichier (chaîne) et analysez-le en html, par exemple (dans jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');
fireb86
la source