Débogage des iframes avec les outils de développement Chrome

j'aimerais utiliser la console de développeur Chrome pour regarder les variables et les éléments DOM dans mon application, mais l'application existe dans un iframe (puisque c'est une application sociale).

Donc, la situation est la suivante:

<containing site>
 <iframe id='foo' src='different domain'>
  ... my app ...
 </iframe>
</containing site>

y a-t-il un moyen d'accéder à ce qui se passe dans ce iframe depuis la console du développeur? Si j'essaie de faire document.getElementById("foo").something , ça ne fonctionne pas, probablement parce que le iframe est dans un domaine différent.

Je ne peux pas ouvrir le contenu iframe dans un nouvel onglet, parce que le iframe doit être capable de parler au site contenant aussi.

266
demandé sur Bemmu 2010-07-18 18:06:40
la source

4 ответов

dans les Developer Tools DE Chrome, il y a une barre le long du dessus, appelée le Execution Context Selector (h/t felipe-sabino ), juste sous les éléments, réseau, Sources... tabs, qui change selon le contexte de l'onglet courant. Lorsque dans L'onglet Console il y a un dropdown dans cette barre qui vous permet de sélectionner le contexte de cadre dans lequel la Console va fonctionner. Sélectionnez votre image dans cette liste déroulante et vous vous retrouverez dans le cadre de contexte. :D

Chrome V59 Chrome version 59

"151960920 google Chrome" v33 Chrome version 33

Chrome v32 & lower Chrome pre-version 32

495
répondu Metagrapher 2017-07-29 20:39:57
la source

actuellement l'évaluation dans la console est effectuée dans le contexte du cadre principal dans la page et il adhère à la même politique d'origine croisée que le cadre principal lui-même. Cela signifie que vous ne pouvez pas accéder aux éléments de l'iframe à moins que le cadre principal ne le puisse. Vous pouvez toujours définir les points de rupture et déboguer votre code en utilisant le panneau Scripts.

mise à Jour: Ce n'est plus vrai. Voir .

9
répondu Yury Semikhatsky 2017-05-23 15:18:01
la source

dans mon scénario assez complexe la réponse acceptée pour savoir comment faire cela dans Chrome ne fonctionne pas pour moi. Vous pouvez essayer le débogueur Firefox à la place (qui fait partie des outils de développement Firefox), qui montre toutes les 'Sources', y compris celles qui font partie d'une iFrame

2
répondu Izzy 2016-08-05 04:13:08
la source

quand l'iFrame pointe vers votre site comme ceci:

<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

vous pouvez accéder à iFrame DOM à travers ce genre de chose.

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
1
répondu Dave Aaron Smith 2011-09-20 20:24:21
la source

Autres questions sur google-chrome debugging iframe