我想使用Chrome开发控制台在我的应用程序中查看变量和DOM元素，但应用程序存在于一个iframe(因为它是一个OpenSocial应用程序)。
所以情况是:
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
有没有办法从开发人员控制台访问iframe中发生的事情?如果我尝试document.getElementById("foo")。它不能工作，可能是因为iframe在不同的域中。
我不能在新选项卡中打开iframe内容，因为iframe需要能够与包含的站点对话。
当前回答
当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的开发人员工具中，顶部有一个栏，称为“执行上下文选择器”(h/t felpe -sabino)，就在元素选项卡下，它会根据当前选项卡的上下文而变化。在控制台选项卡中，该栏中有一个下拉菜单，允许您选择将在其中操作控制台的框架上下文。在下拉菜单中选择你的框架，你会发现自己在适当的框架上下文中。: D
Chrome v59
Chrome v33
Chrome v32及以下版本
在我相当复杂的情况下，如何在Chrome中做到这一点的公认答案不适合我。你可能想试试火狐调试器(火狐开发工具的一部分)，它会显示所有的“源”，包括iFrame的一部分
当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!"));
目前，控制台中的求值是在页面的主框架上下文中执行的，并且它与主框架本身遵循相同的跨原点策略。这意味着您不能访问iframe中的元素，除非主帧可以。您仍然可以使用脚本面板设置断点并调试代码。
更新:现在情况已经不一样了。参见Metagrapher的回答。
