debugging 使用Chrome开发工具调试iframe

2admgd59 于 2022-11-14 发布在其他

关注(0)|答案(4)|浏览(364)

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

debugging

来源：https://stackoverflow.com/questions/3275816/debugging-iframes-with-chrome-developer-tools

4条答案

按热度按时间

w1e3prcc1#

在Chrome的开发者工具中，顶部有一个栏，称为Execution Context Selector（h/t felipe-sabino），就在“元素”页签下，它会根据当前选项卡的上下文而变化。在“控制台”选项卡中，该栏中有一个下拉菜单，允许您选择控制台将在其中运行的框架上下文。在此下拉列表中选择您的框架，您将在相应的框架上下文中找到自己。：D

铬v59x1c 0d1x
铬v33

Chrome v32及更低版本

赞(0）回复(0）举报 2022-11-14

ycl3bljg2#

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

**更新：**这不再是正确的。请参阅Metagrapher的答案。

赞(0）回复(0）举报 2022-11-14

sauutmhj3#

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

赞(0）回复(0）举报 2022-11-14

hjzp0vay4#

在我这个相当复杂的场景中，在Chrome中实现这一点的公认答案对我不起作用。你可能想试试Firefox调试器（Firefox开发工具的一部分），它显示所有的“源”，包括那些属于iFrame的源

赞(0）回复(0）举报 2022-11-14

我来回答

debugging 使用Chrome开发工具调试iframe

4条答案

相关问题

热门标签

最新问答