HTML DOMのIFrameオブジェクト徹底解説！作成方法・主なプロパティ・サンプルコード
HTML DOMのIFrameオブジェクトとは
HTML DOMのIFrameオブジェクトは、HTMLドキュメント内の<iframe>要素を表すオブジェクトです。<iframe>要素を使うことで、現在のページの中に別のWebページやコンテンツを埋め込むことができます。
JavaScriptからは、document.createElement()メソッドを使って動的にiframeオブジェクトを生成できます。
構文
iframeオブジェクトを作成するための基本的な構文は以下の通りです。
document.createElement("IFRAME");IFrameオブジェクトの主なプロパティ
IFrameオブジェクトには、以下のようなプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| contentDocument | iframe要素によって生成されたドキュメントオブジェクト（Document）を返します。 |
| contentWindow | iframe要素によって生成されたウィンドウオブジェクト（Window）を返します。 |
| height | iframe要素のheight属性の値を取得・設定します。 |
| name | iframe要素のname属性の値を取得・設定します。 |
| sandbox | iframe要素のsandbox属性の値を取得・設定します。セキュリティ制限をかける際に使用されます。 |
| seamless | iframeを境界線やスクロールバーなしで、Webページの一部のようにシームレスに表示するかどうかを取得・設定します。 |
| src | iframe要素のsrc属性の値を取得・設定します。埋め込むページのURLを指定します。 |
| srcdoc | iframe要素のsrcdoc属性の値を取得・設定します。インラインでHTMLコンテンツを直接指定できます。 |
| width | iframe要素のwidth属性の値を取得・設定します。 |
IFrameオブジェクトの使用例
ここでは、ボタンをクリックすると新しいiframeが動的に生成されるサンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
}
</style>
</head>
<body>
<h1>DOM IFrameオブジェクトのサンプル</h1>
<button onclick="createIframe()" class="btn">クリックしてiframeを作成する</button>
<script>
function createIframe() {
var x = document.createElement("IFRAME");
x.setAttribute("src", "https://tutorialspoint.com/");
document.body.appendChild(x);
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「クリックしてiframeを作成する」ボタンをクリックすると、指定したURLのページが読み込まれたiframeが生成されます。
このように、JavaScriptのdocument.createElement("IFRAME")を使えば、ページ上に動的にiframeを追加し、外部コンテンツを柔軟に埋め込むことが可能です。必要に応じてsrc属性やheight・widthなどのプロパティを組み合わせて、表示サイズや読み込むコンテンツを制御してみてください。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注