iframe内のDOMについて

Question

javascriptでのiframe内のDOMの操作の方法をおしえてください。

Answer 1

iframe.contentWindow.document で iframe 要素の document が参照できるので、後は通常の DOM API が使えます。
ただし、CORS の制約は受けます。

<iframe id="sample" src="test.html"></iframe>
<script>
var iframe = document.getElementById('sample'),
    doc = iframe.contentWindow.document;  // iframe内文書の document

doc.querySelector('#hoge'); // iframe内文書の id="hoge" な要素ノード
</script>

Comments

[enokiyo]

ありがとうございます。
試してみます。

[enokiyo]

CORSの制約というのがわかりました。
いただいたコードでドメインをまたぐ場合、
console.log(iframe);
は#documentの中身も表示できますが
console.log(doc);
は制約を受けエラーになるのはそういうものなのでしょうか？。

[think49]

そうです。クロスドメインなノードへの参照に制約があります。

Answer 2

var iframeWindow = document.getElementById('iframeに指定したid')
var iframDom = iframeWindow.contentWindow.document // これで取得完了です

参考: iframe内のDOMを操作する方法

Comments

[enokiyo]

ありがとうございます。
似たような回答であったので、
回答が早かった方へベストアンサーとさせていただきました。
ご了承ください。

ありがとうございます！

[退会済みユーザー]

お気になさらず。CORSの制約等、私の回答よりも良い回答をされていたので、私も+1しました。