使用Chrome开发工具调试iframes

我想使用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也需要能够与包含的站点对话。

172312 次浏览
小开

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

更新:这不再是真的。看到Metagrapher的回答。

小开

当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的开发人员工具中，顶部有一个栏，称为Execution Context Selector (h/t felipe-sabino)，就在元素选项卡下，根据当前选项卡的上下文而变化。在控制台选项卡中，该栏中有一个下拉菜单，允许您选择将在其中操作控制台的框架上下文。在下拉菜单中选择你的框架，你会发现自己在适当的框架上下文中。: D

< >强Chrome v59 Chrome version 59

< >强Chrome v33 Chrome version 33

Chrome v32 &较低的 Chrome pre-version 32

小开

在我相当复杂的情况下，如何在Chrome中做到这一点的公认答案不适合我。你可能想试试火狐调试器(火狐开发工具的一部分)，它会显示所有的“源”，包括iFrame的一部分


提交答案