JavaScriptでiframeを操作する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでiframeを操作する方法について現役エンジニアが解説しています。iframeはインラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来ます。クロスドメイン制約などに注意しましょう。サンプルはXAMPPなどのWebサーバー上で実行してください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでiframeを操作する方法について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでiframeを操作する方法について詳しく説明していくね！
お願いします！
iframeとは
インラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来る便利なものです。
src属性で指定した別ページをiframe内で表示させます。
CSSと組み合わせることで、表示させる枠を調整したり、内部コンテンツの調整したりも可能です。ただ、クロスドメインでの利用には注意が必要になるので気をつけて下さい。クロスドメインの場合はiframe内のDOMへのアクセスが制限されます。
JavaScriptでiframeを操作する方法
iframeにアクセスするには、普通にdocument.getElementById( );で要素を取得して利用します。
内部のDOMへのアクセスでは、取得したオブジェクトに対してcontentWindow.documentで要素を取得します。
実際に書いてみよう
index.html
<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>JavaScriptでiframeを操作する</title>
</head>
<body>
<p><button onclick="iframe_test()">iframe内の操作を行います。</button></p>
<iframe src="color_iframe.html" id="id_ifrem"></iframe>
<P><button onclick="iframe_test2()">クロスドメインは変更できません。</button></p>
<iframe src="https://maps.google.co.jp/maps?output=embed&q=東京タワー" id="id_ifrem2"></iframe>
<script type="text/javascript">
function iframe_test(){
var o_iframe = document.getElementById('id_ifrem');
var color = o_iframe.contentWindow.document.getElementById('id_color');
color.innerHTML = "赤色に変えました。";
color.style.background = "red";
};
function iframe_test2(){
var o_iframe2 = document.getElementById('id_ifrem2');
alert("ここのアラートは出ます。次は出ません。");
var o_google = o_iframe2.contentWindow.document;
alert("contentWindowが利用できず、このアラートはでません。");
};
</script>
</body>
</html>
color_iframe.html：
<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>JavaScriptでiframeを操作する</title>
<style>
#id_color {background: blue;}
</style>
</head>
<body id="id_color">iframe内に記載されています.</body>
</html>
※index.htmlとcolor_iframe.htmlは同じフォルダーに配置して下さい。
contentWindowは、WEBサーバ上でないと機能しません。
ローカルで確認する場合でも、WEBサーバを通して動作確認して下さい。
筆者プロフィール
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
