contents()メソッドを使ってiframe内の要素を取得する方法と注意点【jQuery】

今では使用される頻度も少ないiframeですが、GoogleMapや外部のシステムの埋め込みの際に使用する事もあります。
以前、実際の業務でiframe内の要素を取得してどうこうするという案件がありました。その際に実際に使用したiframe内の要素の取得方法を詳しく解説していきます。

contents()メソッドとは

contents()メソッドとはjQueryのメソッドで、指定して要素のテキストノードを含む全子要素を取得できるメソッドです。似たメソッドとしてchildren()メソッドがありますが、「テキストノードを含むかどうか」の違いがあります。

iframe内の要素をcontents()メソッドを使って取得する方法

このcontents()メソッドを使用する事で、iframe内の子要素を取得する事が出来ます。
まずは以下のiframe要素で別のhtmlファイルを埋め込みます。

<iframe src="https://cdg-blog.jp/file/sample_iframe.html"></iframe>

iframe要素で埋め込んだhtmlファイルの内容は以下となります。

<div class="frame">
    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ</p>
</div>

iframe要素で埋め込んだhtmlの内容を取得するためにjQueryのcontents()メソッドを使用します。

$(function(){
	let iframe = $('iframe').contents();
});

上記のようにcontents()メソッドにiframe要素を指定する事で、iframe要素内の全ての子要素を取得する事ができます。次に、ボタンをクリックする事でiframe要素内のテキストの色を変更してみます。

$(function(){
	let iframe = $('iframe').contents();
    $('button').on('click',function(){
        iframe.find('p').css('color','red');
    }
});

このように、contents()メソッドを使用する事でiframe要素内の子要素を取得する事が可能です。

iframe内の要素を取得する際の注意点

iframe要素内の要素を取得する際の注意点として、取得のみは大丈夫なのですが、先ほどの例のように取得したiframe要素内の要素を変更・書き換えする場合は同一サーバー内のファイルに限ります。
外部サーバーのものでは変更・書き換えができませんのでご注意ください。

さいごに

いかがでしたでしょうか。
今回は、contents()メソッドを使ってiframe内の要素を取得する方法と注意点について解説しました。
使用頻度はかなり少なく限定されますが、たまーにiframe要素内の子要素を取得する機会があったりしますので覚えておいて損はないかと思います。