377 votes

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

Je voudrais utiliser le Chrome developer console pour regarder des variables et des éléments du DOM dans mon application, mais l'app existe à l'intérieur d'une iframe (puisque c'est un OpenSocial app).

Donc la situation est la suivante:

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

Est-il possible d'accéder à des choses qui se passe dans la iframe par le développeur de la console? Si j'essaie de faire document.getElementById("foo").quelque chose, ça ne fonctionne pas, probablement parce que l'iframe est dans un domaine différent. Je ne peux pas ouvrir le contenu de l'iframe dans un nouvel onglet, parce que l'iframe doit être en mesure de parler à l'contenant site.

668voto

Metagrapher Points 2891

Dans les Outils de développement de Chrome il y a une barre sur le haut, juste sous les Éléments, de Réseau, de Sources... onglets, qui change en fonction du contexte de l'onglet en cours. Lorsque, dans l'onglet Console il y a une liste déroulante dans la barre qui vous permet de sélectionner l'image contexte dans lequel la Console fonctionnera. Sélectionnez votre image dans cette liste déroulante et vous vous retrouverez dans le cadre de contexte. :D

Chrome v33 Chrome version 33

Chrome v32 et inférieure Chrome pre-version 32

10voto

Yury Semikhatsky Points 107

Actuellement, l'évaluation de la console est réalisé dans le contexte du cadre principal de la page et il adhère à la croisée de la politique d'origine comme le principal cadre lui-même. Cela signifie que vous ne pouvez pas accéder à des éléments de l'iframe, à moins que la trame principale peut. Vous pouvez toujours définir des points d'arrêt et déboguer votre code à l'aide du panneau Scripts.

Mise à jour: Ce n'est plus vrai. Voir Metagrapher de réponse.

2voto

Dave Aaron Smith Points 2710

Lorsque 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 par ce genre de chose.

 var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X