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

使用chrome开发工具调试iframe

  •  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 年前
        1
  •  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 Chrome version 59

    铬V33 Chrome version 33

    铬v32&更低 Chrome pre-version 32

        2
  •  9
  •   Community CDub    8 年前

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

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

        3
  •  2
  •   Izzy    8 年前

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

        4
  •  1
  •   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!"));