代码之家 › 专栏 › 技术社区 › 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!"));

推荐文章

Winzer Prince · 为什么在使用for循环和printf函数打印缓冲区中的字符时,会得到不同的结果?

6 月前

Edmund Young · 在C++优先级队列中使用静态成员函数作为比较器时发生地址清理器错误

9 月前

Mahir · 如何确保Flask应用程序管理面板中的项目具有一键删除功能?

1 年前

mins · Spyder或Pandas在调用函数DataFrame.info()时的错误行为

1 年前

Gar · 如何将React Native Debugger或Redux开发工具与Expo 50一起使用

1 年前

MD Jahid Hasan · 如何使用WebStorm调试NextJS的TypeScript服务器端代码?

1 年前

PBtrader · 试图从特定酒吧获取价格

1 年前

Muhammad Ikhwan Perwira · 在屏幕上创建一个小型控制面板,用于pyautogui监视和控制

1 年前

Lee Barone · Shopify或Javascript调试

1 年前

prince pandey · 我是应用程序开发的新手。我正试图制作一个心愿单应用程序。在那个应用程序中,当我实现删除功能时,我的应用程序正在崩溃

1 年前