jQueryを使ってiframe要素の中身にアクセスする

残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。

今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。

jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。

[追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。

iframe内のドキュメントにアクセスするにはcontents()

$(...).contents()は通常、ある要素の子要素すべてにアクセスしますが、iframeの場合は、中にあるドキュメントをさします。Firebugで次のように実行すると、

jQuery('iframe').contents()

次のように取得できます。

[Document iframe.html]

これはjQueryオブジェクトになっていて、ちょうど親フレームをjQuery(document)というように包んだものと同じ形式みたいです。よって、続けてメソッドチェインできます。

jQuery('iframe').contents().find('p')

実にjQueryらしくアクセスできますね。end()を使えば、iframe内ドキュメントのコンテキストから抜け出すこともできます。

jQuery('iframe')
    .contents()
        .find('p').css('background-color', 'red').end()
    .end() // => jQuery('iframe')

メソッドチェインしない方法

メソッドチェインしすぎるのは嫌だー、というときはjQuery(selector, [context]) の形式が使えます( jQuery() - jQuery API )

jQuery('p', jQuery('iframe').contents());

iframe内を処理対象にしていることがはっきりわかりそうなのは、こっちかもしれませんね。

まとめ

$(...).contents()を使うとiframe内ドキュメントに簡単にアクセスできます