ブックマークレットで始める業務改善＜中級編＞① iframeの中へ！
前回はこちら。
今回から中級編です。今回は<iframe>タグへの対応です。いきなりマニアックですが、知っていないとはまってしまって進めなくなるポイントですので最初に解説しておきます。
ざっと流し読みして、思い当たる問題に直面したときに見返してください。
<iframe>タグについて
<iframe>タグは、webページ上の枠の中に、別のwebページを表示させる（埋め込む）仕組みです。
似たタグに<frame>もありますが、この記事では代表として<iframe>を使って説明します。考え方は同じです。
ブックマークレットの対象システムに<iframe>が使われていると、素直に要素を捕まえることができなくなります。例題をやってみましょう。
例題
以下のフォームで、サンプル入力欄に「こんにちは！」と入力するブックマークレットを作成してください。
失敗例：
javascript:(function(){
document.querySelector("#sample-input").value = "こんにちは！";
})();入力欄が sample-input というIDを持っているので楽勝、と思いきや、このブックマークレットは動きません。試してみてください。
これは、document（文書全体）があくまでも今のwebページだけ（上の図の例だと〇〇.html）を対象としており、フレームの中は別の文書扱いになっているからです。これは知らないとはまります。
というわけで、document からは直接アクセスすることができません。こんなときは、まずiframe要素を捕まえて、その中に入っている document （上の図の例だと△△.html）を取り出す、というステップを踏みます。
javascript:(function(){
const iframe = document.querySelector('iframe[src="iframe-sub.html"]');
const doc = iframe.contentWindow.document;
doc.querySelector("#sample-input").value = "こんにちは！";
})();2行目でiframe要素を捕まえて、3行目でフレームの中のwebページのdocument を取得して doc という変数に入れています。4行目は、先頭が document から doc に代わっただけで、あとはいつものパターンです。
「CSSセレクターは絶対に合っているはずなのに要素が取れない！」というトラブルに出くわしたときは、<iframe>タグを疑ってください。
<iframe>の中かどうかの確認方法
対象とする要素が iframe の中に入っているかは、デベロッパーツールで確認できます。「要素」の下部に、今選択している要素までの階層構造が表示されています。これを左にスクロールしていけば分かります。
クロスドメイン制約
iframe の中には、別のサイトにあるwebページも表示できます。例えば様々なサイトでGoogle Mapの地図が埋め込まれていますが、これは iframe の中に表示されています。（デベロッパーツールで確認してみてください。）
呼び出し側のwebページのサイトとは別のサイトにあるwebページを iframeの中に表示している場合、JavaScriptでそのwebページの中身にアクセスしようとするとエラーになります。
これはクロスドメイン制約というものです。異なるサイトの中身を自由に触れてしまうとセキュリティー上の問題があるため、そうなっています。これはどうしようもないため、諦めるか、別の手段を考える必要があります。
今回のまとめ
「CSSセレクターは絶対に合っているはずなのに要素が取れない！」というときに考えられる<iframe>タグの扱い方を学習しました。そういった状況になるまでは、この記事の内容は忘れていただいて結構です。また必要なときに見直してください。
次回はこちらです。
このシリーズのすべての記事は、こちらのマガジンにまとめています。
🐶スキしていただけると励みになります！
この記事が気に入ったらサポートをしてみませんか？