使用Chrome开发者工具调试嵌入框架（iframes）

Question

使用Chrome开发者工具调试嵌入框架（iframes）

370

我想使用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需要能够与包含站点通信。

- Bemmu

4个回答

10

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

更新：这不再是真实情况。请参见Metagrapher的回答。

- Yury Semikhatsky

3

这个问题仍然未解决... 几乎一年过去了。 - Glen Little

2

当 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!"));

- Dave Aaron Smith

2

由于跨域限制，这可能不再起作用。 - surfmuggle

2

在我相当复杂的情况下，Chrome中关于如何实现这一点的被接受的答案对我无效。您可能想尝试使用Firefox调试器（Firefox开发者工具的一部分），它显示所有“源”，包括那些属于iFrame的源。

- Izzy

你能加个屏幕截图吗？我找不到“来源”。 - Shayan

https://developer.mozilla.org/en-US/docs/Tools/Working_with_iframes - TheMaster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Metagrapher · Accepted Answer

在Chrome的开发者工具中，顶部有一条栏称为“执行上下文选择器”（h/t felipe-sabino），就在Elements选项卡下方，根据当前标签页的上下文而变化。当在控制台选项卡中时，在该栏中有一个下拉菜单，允许您选择控制台将操作的框架上下文。在此下拉菜单中选择您的框架，您将发现自己处于适当的框架上下文中。 :D

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32及更低版本 Chrome pre-version 32