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
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
source

donnez-moi une erreur: Erreur: Autorisation refusée d'accéder à la propriété 'ownerDocument'

— Imran Khan

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

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

L'URL source est cassée.

— karthzDIGI

@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

<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
source

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
source