Question

我想使用Chrome开发者控制台查看我的应用中的变量和DOM元素，但该应用程序存在于iframe内（因为它是一个OpenSocial应用程序）。

所以情况是：

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

有没有办法从开发者控制台访问iframe中发生的事情？如果我尝试document.getElementById("foo").something，则无效，可能是因为iframe位于不同的域中。

我无法在新标签页中打开iframe内容，因为iframe也需要能够与包含的网站进行对话。

Answer 1

在Chrome的开发者工具中，顶部有一个名为Execution Context Selector（h / t felipe-sabino）的栏，位于“元素”，“网络”，“来源...”标签下，根据当前选项卡的上下文进行更改。在控制台选项卡中，该栏中有一个下拉列表，允许您选择控制台将在其中运行的帧上下文。在此下拉菜单中选择您的框架，您将发现自己处于适当的框架环境中。：d

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32＆amp;下

Answer 2

目前，控制台中的评估是在页面中主框架的上下文中执行的，并且它遵循与主框架本身相同的跨源策略。这意味着除非主框架可以，否则您无法访问iframe中的元素。您仍然可以使用Scripts面板设置断点并调试代码。

更新：这已不再适用。请参阅Metagrapher's answer。

Answer 3

在我相当复杂的情况下，在Chrome中如何执行此操作的已接受答案对我不起作用。您可能希望尝试使用Firefox调试器（Firefox开发人员工具的一部分），它显示所有“源”，包括属于iFrame的那些

Answer 4

当iFrame指向您的网站时：

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

您可以通过这种方式访问iFrame DOM。

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

使用Chrome开发人员工具调试iframe

4 个答案: