JavaScriptでiframeを操作する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでiframeを操作する方法について現役エンジニアが解説しています。iframeはインラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来ます。クロスドメイン制約などに注意しましょう。サンプルはXAMPPなどのWebサーバー上で実行してください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでiframeを操作する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでiframeを操作する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

iframeとは

インラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来る便利なものです。
src属性で指定した別ページをiframe内で表示させます。

CSSと組み合わせることで、表示させる枠を調整したり、内部コンテンツの調整したりも可能です。ただ、クロスドメインでの利用には注意が必要になるので気をつけて下さい。クロスドメインの場合はiframe内のDOMへのアクセスが制限されます。

 

JavaScriptでiframeを操作する方法

iframeにアクセスするには、普通にdocument.getElementById( );で要素を取得して利用します。

内部のDOMへのアクセスでは、取得したオブジェクトに対してcontentWindow.documentで要素を取得します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。