Existe-t-il un moyen de changer le contexte en iframe dans la console javascript?

107

Je voudrais changer le contexte du javascript exécuté dans l'outil de développement webkit / console Firebug pour exécuter son code comme s'il s'exécute depuis l'intérieur d'un iframe sur la page.

Je sais que je pourrais le faire en ouvrant la page dans l'iframe sur une page séparée, mais je veux exécuter du code là où il interagit avec le cadre parent.

javascript iframe console firebug Muhd
la source
1
vous pouvez toujours exécuter du code de la window.frames[x]manière. Ajoutez simplement la commande que vous voulez. IEwindow.frames[0].runFunction()
LoveAndCoding
1
@Ktash, aimeriez-vous peut-être en faire une réponse?
Muhd
Comment puis-je faire la même chose dans IE? Je trouve extrêmement difficile de sélectionner un élément dans la fenêtre de la console en utilisant $ si l'élément est situé dans un IFRAME interne. Veuillez aider.
tarekahf

Réponses:

149

Chrome 15 vous permet de modifier la portée de la console. En bas de la console, à côté du bouton d'effacement de la console, il y a un menu qui dit <top frame>qui donnera une liste des cadres disponibles:

entrez la description de l'image ici

Firefox a une fonctionnalité similaire en cours de développement:

entrez la description de l'image ici

Vous pouvez également naviguer entre les cadres en utilisant la ligne de commande :

var frame = document.getElementById("frame1").contentWindow;
cd(frame);
Dennis
la source
6
Puis-je exécuter du code dans la console pour accomplir la même chose ou dois-je cliquer sur le sélecteur de cadre?
bodine
@bodine - avez-vous trouvé un moyen de l'accomplir à partir de la commande de la console?
arty
1
Notez que cette liste déroulante est maintenant en haut de la console, plutôt qu'en bas.
Muhd
1
Je ne vois pas cela dans Chrome 38. Impossible de comprendre rapidement comment procéder dans Chrome; a utilisé le cd (frames [<numéro d'index>]) dans Firefox à la place.
Akrikos
1
C'est dommage. Il ne conservera pas le cadre sélectionné si le contenu du cadre est modifié. Il revient à "top frame"
bryc
22

Vous pouvez exécuter du code dans <iframe>s en utilisant la window.frames[x]fonctionnalité. Par exemple,

window.frames[0].runFunction()
LoveAndCoding
la source
Une bonne alternative si FireBug est votre arme de choix. Merci.
Surreal Dreams
1
Comment exécuteriez-vous du code en dehors de fonctions telles que les commandes jQuery? Ou si vous souhaitez obtenir une référence à un élément DOM sous un certain cadre, exécutez du code sur cet élément?
David
Ainsi, à titre d'exemple serait:window.frames[0].alert()
Shayan
6

Dans Chrome d'aujourd'hui (version 52), il ne vous reste plus qu'à sélectionner l'iframe dans l'onglet "Éléments" des outils de développement. Tout ce que vous exécutez dans la console JS s'exécutera automatiquement dans le contexte de l'iframe sélectionné.

Par exemple, ici, j'ai sélectionné un iframe, et lorsque je tape document.location.pathnamedans la console, il renvoie l'attribut src de l'iframe, au lieu de l'URL de la barre d'adresse:

entrez la description de l'image ici

dpercy
la source
4

Pour la solution Firebug, voir cette réponse sur une autre question SO. Cependant, ne fonctionne pas dans plusieurs domaines comme la solution Chrome de Dennis.

Edit: Avec les versions plus récentes de Firebug, ils peuvent avoir corrigé un problème interdomaine.

Muhd
la source
4

L'exécution des instructions de script et des commandes par défaut se fait dans le contexte de la fenêtre de niveau supérieur. Si vous utilisez des cadres, utilisez la commande de console "cd ()".

CD() appel de cd () sans paramètres retourne à la fenêtre de niveau supérieur.

cd (fenêtre) Vous permet de changer l'évaluation de l'expression de ligne de commande de la fenêtre de niveau supérieur par défaut de la page Web à la fenêtre d'un cadre.

Plus d'infos, ici

Sébastien
la source
C'est exactement ce que je cherchais. (cela fonctionne dans Firefox) Merci.
user2410595
4 
cd(document.getElementsByTagName('iframe')[0]);
Andreyka Bonart
la source
2
Bienvenue dans Stack Overflow! Veuillez envisager de modifier votre message pour ajouter plus d'explications sur ce que fait votre code et pourquoi il résoudra le problème. Une réponse qui contient principalement du code (même si cela fonctionne) n'aidera généralement pas l'OP à comprendre son problème.
SuperBeasedMan
Merci! C'est une façon étrange pour Firefox de le faire, mais je suppose que "cd (iframe)" est ce que vous entrez dans la console pour changer de contexte. Je vous ai donné un +1 car vous m'avez sauvé des tonnes de coups de tête, mais vous devriez vraiment peaufiner cet article et l'expliquer!
Scott Smith