iframe内の要素をjQueryで操作する方法

この記事ではjQueryにおいてiframe内の要素をjQueryで操作する方法を紹介します。

=== 目次 ===

同一サーバーへのiframeの場合

iframe内のルート要素はjQueryのcontents関数で取得できます。あとはfind関数で通常通りにセレクタでアクセスすればOKです。

以下、iframe内の画像を非表示にするサンプルコードです。

<iframe src="xxx" id="ifr"></iframe>
<script>
    $("#ifr").contents().find("img").hide();
</script>

別サーバーへのiframeの場合、ブラウザ側のXSS対策でそもそもJavaScriptでアクセスできません。

よって、jQueryで操作する方法は残念ながら存在しません。

この記事ではjQueryにおいてiframe内の要素をjQueryで操作する方法を紹介しました。