iframe内のオブジェクトをデベロッパーツールのコンソールから操作する #html #javascript

クライアントサイドのJavascript開発では、各ブラウザのデベロッパーツールに付属している対話型のコンソールを使い、状態を確認しながら開発する方法がとても便利ですが、iframe内のオブジェクトを呼びだそうとしても、Same-Origin Policyの制約などでオブジェクトが読めなかったりします。

調べてみるとブラウザにより対応方法が異なっていたのでメモします。

更新日: 2013/12/29

IE9,10

コンソールからiframeオブジェクトに対してcdコマンドを実行すると、スコープがiframe内に移動します。移動後はいつも通りオブジェクトを操作することができます。

$ cd(frames[0])

Firefox

標準デベロッパーツールでは方法がみつかりませんでしたが、Add-onのFirebugを使うとIE9,10と同様にcdコマンドを使うことができました。

Chrome

Consoleタブの下部からGUIでiframeを選択することができます。<top frame>となっている部分から対象のiframeを選択することにより、スコープがiframe内に移動します。移動後はいつも通りオブジェクトを操作することができます。

IE8, Safari

調べてみましたが、よい方法が見つかりませんでした。知ってる方が居ましたら教えていただけると助かります。

参考

http://stackoverflow.com/questions/5047360/firebug-how-to-cd-to-an-iframe