代码之家 › 专栏 › 技术社区 › Bemmu

使用chrome开发工具调试iframe

google-chrome iframe debugging

275

Bemmu · 技术社区 · 14 年前

我想使用chrome开发人员控制台查看我的应用程序中的变量和dom元素,但该应用程序存在于 iframe (因为它是一个OpenSocial应用程序)。

所以情况是:

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

有什么方法可以接近发生在那里的事情吗 伊夫拉姆 从开发人员控制台?如果我尝试去做 document.getElementById("foo").something 不起作用,可能是因为 伊夫拉姆 在另一个域中。

我不能打开 伊夫拉姆 新选项卡中的内容,因为 伊夫拉姆 还需要能够与包含站点对话。

4 回复 | 直到 7 年前

511

Metagrapher 7 年前

在Chrome中的开发人员工具中,顶部有一个栏,称为 执行上下文选择器 (h/t felipe sabino ),位于元素、网络、源下…选项卡,根据当前选项卡的上下文进行更改。在控制台选项卡中,该栏中有一个下拉列表,允许您选择控制台将在其中操作的框架上下文。在此下拉列表中选择您的框架,您将发现自己处于适当的框架上下文中。d

chrome v59

chrome v33

Chrome v32&lower
D Execution Context Selector (H/T) felipe-sabino ,就在元素、网络、源下…选项卡,根据当前选项卡的上下文进行更改。在控制台选项卡中,该栏中有一个下拉列表,允许您选择控制台将在其中操作的框架上下文。在此下拉列表中选择您的框架,您将发现自己处于适当的框架上下文中。D

铬V59

铬V33

铬v32&更低

Community CDub 8 年前

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

更新: 这不再是真的了。见 Metagrapher's answer .

Izzy 8 年前

在我相当复杂的场景中,如何在Chrome中实现这一点的公认答案不适用于我。您可能想尝试使用firefox调试器(firefox开发工具的一部分),它显示所有的“源”,包括那些属于iframe的源。

Dave Aaron Smith 13 年前

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

推荐文章

user3425506 · 没有互联网连接无法获得PWA

4 月前

sunics · jQuery在ul中查找li元素

1 年前

Marlon · 在Navigationextras中传递大数据router.navigation Angular 16导致Firefox错误

1 年前

Curious66 · 如何在谷歌会议中捕获传入的音频流

1 年前

Tricotou · $.get(code_url)执行返回的代码,不使用eval(),也不将其附加到DOM。jQuery安全性失败?

1 年前

ÙØÙØ¯ Ø§ÙÙÙ · 使用sendMessage功能时从Chrome扩展程序获取数据的延迟

1 年前

Patrick Potocny · Next.js 14草稿模式在iframe中不起作用(无头CMS预览)

1 年前

Vrushabh Ranpariya · 谷歌Chrome-开发工具-网络选项卡:设计更新

1 年前

Johnny Chen · 相同的字体在chrome和firefox中的显示方式不同

1 年前

Alexander Mills · Flutter不将Chrome识别为“web”,反之亦然

1 年前