【jQuery】iframe内の要素を取得する方法！

あきぞらです。

jQueryをいじっていて、iframeタグ内の要素を取得したいときがありました。

ふだんjQueryで要素を取得する方法とはちょっとやり方が違うので、

その方法を紹介したいと思います。

contents()を使ってiframe内の要素にアクセスする

たとえば、以下のようなiframeを含む要素があったとします。

<iframe src="/demo/html/iframe.html" data-mec="internal-link" width="100%" height="100%">
    <h1>Example</h1>
    <p>test</p>
</iframe>

このiframeの子要素にアクセスしたいときは以下のように取得します。

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

iframeタグをcontens()を使って取得するところがミソです。

例えばこの中のh1要素にアクセスするには、findやセレクタを使ってアクセスできます。

const title = test.find('h1').text();

これでiframe中でも要素を取得することができました！