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
の内容を新しいタブで開くことができません。
Chromeのデベロッパーツールには、上部にバーがあり、Execution Context Selector
(h/t felipe-sabino )と呼ばれ、要素、ネットワーク、ソース...タブのすぐ下にあります。現在のタブのコンテキストで。 [コンソール]タブでは、そのバーにドロップダウンがあり、コンソールを操作するフレームコンテキストを選択できます。このドロップダウンでフレームを選択すると、適切なフレームコンテキストが表示されます。 :D
Chrome v59
Chrome v33
Chrome v32以下
現在、コンソールでの評価はページ内のメインフレームのコンテキストで実行され、メインフレーム自体と同じクロスオリジンポリシーに準拠しています。これは、メインフレームがアクセスできない限り、iframeの要素にアクセスできないことを意味します。ただし、スクリプトパネルを使用してブレークポイントを設定し、コードをデバッグできます。
更新:これはもはや真実ではありません。 Metagrapher's answer を参照してください。
私のかなり複雑なシナリオでは、Chromeでこれを行う方法について受け入れられている答えは私には機能しません。代わりにFirefoxデバッガー(Firefox開発者ツールの一部)を試してください。iFrameの一部を含むすべての「ソース」が表示されます。
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!"));