HTMLのiframeタグの使い方を詳しく解説

王林
リリース: 2024-02-21 09:21:03
オリジナル
1327 人が閲覧しました

HTMLのiframeタグの使い方を詳しく解説

HTML での iframe タグの使用法の詳細な説明

HTML の iframe タグは、Web に他の Web ページや画像、その他のコンテンツを埋め込むために使用されるメソッドです。ページ。 iframe タグを使用すると、1 つの Web ページ内に別の Web ページのコンテンツを表示することができ、Web ページのレイアウトの柔軟性と多様性を実現できます。この記事では、iframeタグの使い方と具体的なコード例を詳しく紹介します。

1. iframe タグの基本構文構造
HTML で iframe タグを使用するには、次の基本構文構造が必要です:

各属性の意味は以下のとおりです。

  1. src: 埋め込むWebページまたは画像のURLを指定します。相対パスまたは絶対パスを使用できます。
  2. name: ページ内での検索やその他の操作の実行に使用できる iframe の名前を指定します。
  3. scrolling: スクロール バーを表示するかどうかを指定します。「yes」(スクロール バーを表示する) または「no」(スクロール バーを表示しない) に設定できます。
  4. frameborder: 枠線を表示するかどうかを指定します。「1」(枠線を表示する)、「0」(枠線を表示しない)に設定できます。
  5. width: iframe の幅を指定します。ピクセル値またはパーセンテージとして設定できます。
  6. height: iframe の高さを指定します。ピクセル値またはパーセンテージとして設定できます。

2. Web ページの埋め込みの例
次は、iframe タグを使用して別の Web ページを埋め込む方法を示す簡単な例です:

    嵌入网页示例 

嵌入网页示例

ログイン後にコピー

上記の例では、 http://www.example.com という名前の Web ページが現在のページに埋め込まれています。埋め込まれた iframe の幅は 800 ピクセル、高さは 600 ピクセルで、境界線は表示されません。

3. 画像の埋め込みの例
Web ページの埋め込みに加えて、iframe タグを使用して画像を埋め込むこともできます。 iframe タグを使用して画像を埋め込む方法を示す例を次に示します。

    嵌入图片示例 

嵌入图片示例

ログイン後にコピー

上の例では、example.jpg という名前の画像を現在のページに埋め込みます。埋め込まれた iframe の幅は 800 ピクセル、高さは 600 ピクセルで、境界線は表示されません。

4. JavaScript を使用して iframe を制御する
基本的な使用法に加えて、JavaScript を使用して iframe タグの動作を制御することもできます。以下は、JavaScript を使用して iframe の URL を動的に変更する方法を示す例です。

    通过JavaScript控制iframe示例  

通过JavaScript控制iframe示例

ログイン後にコピー

上の例では、JavaScript を使用して関数changeURL() を定義します。これにより、次の ID を持つ iframe が変更されます。 「myFrame」のURL。ボタンをクリックすることで、iframe内に表示されるWebページを動的に変更できます。

概要:
iframe タグを使用すると、他の Web ページや画像、その他のコンテンツを Web ページに埋め込み、柔軟な Web ページ レイアウトを実現できます。 iframe を使用する場合は、埋め込まれた Web ページまたは画像の URL が正しいことを確認すること、iframe のサイズと必要に応じてスクロール バーや境界線を表示するかどうかを設定すること、iframe の動作に注意する必要があります。 JavaScript を通じて動的に制御できます。この記事の内容が、皆さんにとって iframe タグの使い方を理解するのに役立つことを願っています。

(総単語数: 571 単語)

以上がHTMLのiframeタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!