Depuración de iframes con herramientas para desarrolladores de Chrome
Me gustaría usar la consola de desarrollador de Chrome para ver variables y elementos DOM en mi aplicación, pero la aplicación existe dentro de iframe(ya que es una aplicación OpenSocial).
Entonces la situación es:
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
¿ Hay alguna forma de acceder a lo que sucede iframedesde la consola del desarrollador? Si intento hacerlo document.getElementById("foo").something, no funciona, probablemente porque iframeestá en un dominio diferente.
No puedo abrir el iframecontenido en una nueva pestaña porque iframetambién debe poder comunicarse con el sitio que lo contiene.
En las Herramientas de desarrollo de Chrome, hay una barra en la parte superior, llamada Execution Context Selector(h/t felipe-sabino ), justo debajo de la pestaña Elementos, que cambia según el contexto de la pestaña actual. Cuando esté en la pestaña Consola, hay un menú desplegable en esa barra que le permite seleccionar el contexto del marco en el que funcionará la Consola. Seleccione su marco en este menú desplegable y se encontrará en el contexto del marco apropiado. :D
Cromo v59
Cromo v33
Chrome v32 y versiones anteriores
Actualmente, la evaluación en la consola se realiza en el contexto del marco principal de la página y se adhiere a la misma política de origen cruzado que el propio marco principal. Esto significa que no puede acceder a los elementos del iframe a menos que el marco principal pueda hacerlo. Sin embargo, aún puedes establecer puntos de interrupción y depurar tu código usando el panel Scripts.
Actualización: esto ya no es cierto. Vea la respuesta de Metagrapher .
Cuando el iFrame apunta a su sitio de esta manera:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<iframe id="my_frame" src="/wherev"></iframe>
</body>
</html>
Puede acceder a iFrame DOM a través de este tipo de cosas.
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
