jQuery/JavaScript : accès au contenu d'une iframe

Question

jQuery/JavaScript : accès au contenu d'une iframe

Demandé el 13 de Décembre, 2008: Quand la question a-t-elle été
318250 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je voudrais manipuler le HTML à l'intérieur d'une iframe en utilisant jQuery.

Je pensais pouvoir le faire en définissant le contexte de la fonction jQuery comme étant le document de l'iframe, quelque chose comme ça :

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

Cependant, cela ne semble pas fonctionner. Un peu d'inspection m'a montré que les variables dans le fichier frames['nameOfMyIframe'] son undefined à moins que j'attende un moment pour que l'iframe se charge. Cependant, lorsque l'iframe se charge, les variables ne sont pas accessibles (j'obtiens permission denied -).

Quelqu'un connaît-il un moyen de contourner ce problème ?

Demandé el 13 de Décembre, 2008 par rz.

3 votes

Que contient l'iFrame - son src est-il défini sur un autre domaine ?

Commenté el 14 de Décembre, 2008 par James

0 votes

S'il s'agit d'un autre domaine, est-il encore possible d'accéder à son contenu ou d'enregistrer un événement ?

Commenté el 1 de Octobre, 2009 par adardesign

37 votes

Non, car ce serait du cross-site scripting, ce qui est interdit pour des raisons de sécurité. Ma solution a été d'utiliser un proxy : je fais passer le HTML dans le IFRAME textuellement par mon propre site, de sorte qu'il n'y a plus de cross-site du point de vue du navigateur.

Commenté el 6 de Avril, 2010 par reinierpost

Afficher 2 autres commentaires

Answer 1

5 Réponses

Answer 2

1012voto

Yasir Laghari Points 6127

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

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

Référence

Répondu el 28 de Octobre, 2009 par Yasir Laghari (6127 Points )

164 votes

C'est bien de connaître la politique de la même origine, mais c'est la réponse qui fait ce que le PO voulait. Pourquoi l'autre réponse a-t-elle été choisie comme étant la bonne ?

Commenté el 24 de Novembre, 2010 par Jason Swett

2 votes

Vous devez utiliser un proxy pour obtenir le HTML dans votre origine. Par exemple, johnchapman.name/

Commenté el 17 de Mai, 2011 par mhenry1384

8 votes

@JasonSwett, je pense que le problème de l'OP est en effet le same origin policy Dans ce cas, cette réponse n'est pas une solution pour lui.

Commenté el 4 de Novembre, 2011 par ANeves

Afficher 8 autres commentaires

Answer 3

398voto

Onur Bebin Points 2569

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

Répondu el 13 de Décembre, 2008 par Onur Bebin (2569 Points )

6 votes

@Pacerier Le mieux est d'utiliser un proxy pour le contenu de l'iframe sur votre site, si vous pouvez...

Commenté el 28 de Février, 2012 par Tracker1

10 votes

@Tracker1 : Pouvez-vous suggérer un framework/api/design pattern pour mettre en œuvre cette solution de proxy. Des liens vers un exemple ou un tutoriel, etc. J'ai essayé de chercher mais je n'en ai pas trouvé.

Commenté el 27 de Juin, 2012 par Umer Hayat

3 votes

Dans ce cas, il s'agit d'utiliser le serveur http qui sert la page de votre domaine comme proxy - demander le contenu du site tiers et le transmettre dans la réponse http au client. Comme vous pouvez le deviner, cela a un impact rapide sur la réactivité de votre site, car les requêtes auparavant parallèles sont exécutées en série, votre serveur constituant un goulot d'étranglement potentiel.

Commenté el 5 de Mars, 2013 par rutherford

Afficher 2 autres commentaires

Answer 4

96voto

davryusha Points 561

Vous pourriez utiliser .contents() de jQuery.

El .contents() peut également être utilisée pour obtenir le document de contenu d'une iframe, si cette dernière se trouve sur le même domaine que la page principale.

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});

Répondu el 2 de Avril, 2010 par davryusha (561 Points )

5 votes

J'ai besoin de récupérer le contenu du i frame et de ne pas définir le body ...... Lorsque je fais ce qui précède, cela ne fonctionne pas et renvoie toujours un corps vide.

Commenté el 20 de Juin, 2012 par George Hanna

3 votes

@DarkoZ Um, en fait cette réponse est venue en premier, donc si quelque chose, l'autre réponse était la copie

Commenté el 27 de Mai, 2015 par michaelpri

0 votes

@DarkoZ : laisser le commentaire original ne m'a pas fait avoir honte de toi, mais j'ai perdu 30 secondes à essayer de comprendre une question qui n'en est pas une :) Donc supprimer toute cette discussion sur une réponse de plagiat pourrait être mieux.

Commenté el 29 de Juin, 2015 par Dan Dascalescu

Afficher 1 autres commentaires

Answer 5

47voto

basysmith Points 229

Si l'iframe src provient d'un autre domaine, vous pouvez toujours le faire. Vous devez lire la page externe en PHP et la répercuter depuis votre domaine. Comme ceci :

iframe_page.php

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

    $domain = file_get_contents($URL);

    echo $domain;
?>

Alors quelque chose comme ça :

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

Répondu el 27 de Juin, 2010 par basysmith (229 Points )

13 votes

Bien sûr, comme votre serveur reçoit la page distante et non le navigateur de l'utilisateur, aucun cookie ne sera envoyé à la page distante. YMMV.

Commenté el 3 de Novembre, 2010 par Mark Fowler

1 votes

@Mark : Vous pouvez facilement envoyer des cookies, des données affichées, des en-têtes HTTP et autres si vous l'implémentez avec l'extension curl. php.net/manual/fr/book.curl.php

Commenté el 16 de Février, 2011 par geon

2 votes

@geon : mais le navigateur n'enverra pas les cookies du domaine étranger à votre script PHP.

Commenté el 20 de Février, 2011 par ysth

Afficher 10 autres commentaires

Answer 6

27voto

Andreas Grech Points 39188

Vous devez attacher un événement au gestionnaire de chargement d'une iframe, et exécuter le js à cet endroit, afin de vous assurer que l'iframe a fini de se 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ésout le problème du "pas encore chargé", mais en ce qui concerne les autorisations, si vous chargez une page dans l'iframe qui provient d'un domaine différent, vous ne pourrez pas y accéder en raison de restrictions de sécurité.

Répondu el 13 de Décembre, 2008 par Andreas Grech (39188 Points )

0 votes

C'est une bonne idée, en fait j'étais en train de l'essayer juste comme vous avez répondu. Cependant, cela ne résout pas le problème de la permission refusée (cela résout le problème de devoir attendre avant de commencer à accéder au contenu de l'iframe).

Commenté el 13 de Décembre, 2008 par rz.

0 votes

En fait... laisse tomber, il semble que l'attente soit toujours nécessaire même en faisant ça.

Commenté el 13 de Décembre, 2008 par rz.

0 votes

La fonction "prêt" fonctionne. Cependant, il semble qu'elle n'attende pas que le contenu de l'iframe ait fini de se charger - seulement le document parent, même lorsqu'elle est invoquée sur le contenu de l'iframe lui-même. J'imagine que c'est aussi à cause de la même politique d'origine.

Commenté el 15 de Décembre, 2008 par rz.

Afficher 1 autres commentaires

jQuery/JavaScript : accès au contenu d'une iframe

Réponses

iframe_page.php

page_affichage.html

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery/JavaScript : accès au contenu d'une iframe

Réponses

iframe_page.php

page_affichage.html

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: