首页 文章

使用Chrome开发人员工具调试iframe

提问于
浏览 次
271

我想使用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 iframe google-chrome

4 回答

  • 9

    在Chrome的开发者工具中，顶部有一个名为 Execution Context Selector （h / t felipe-sabino）的栏，位于元素，网络，来源...标签下，根据当前标签的上下文而变化 . 在“控制台”选项卡中，该栏中有一个下拉列表，允许您选择控制台将在其中运行的帧上下文 . 在此下拉菜单中选择您的框架，您将发现自己处于适当的框架环境中 . ：d

    Chrome v59
    Chrome version 59

    Chrome v33
    Chrome version 33

    Chrome v32 & lower
    Chrome pre-version 32

    回复于
  • 1

    在我相当复杂的情况下，如何在Chrome中执行此操作的已接受答案对我不起作用 . 您可能希望尝试使用Firefox调试器（Firefox开发人员工具的一部分），它显示所有“源”，包括属于iFrame的那些“源” .

    回复于
  • 2

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

    Update: 这不再是真的 . 见Metagrapher's answer .

    回复于
  • 502

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

相关问题