iframeの書き方にはどのようなものがあるのでしょうか？

zbt

リリース： 2023-10-19 13:45:20

オリジナル

1503 人が閲覧しました

Iframe の書き込み方法には、基本的な Iframe の書き込み、ネストされた Iframe の書き込み、適応的な幅と高さの Iframe の書き込み、スタイルと属性を使用した Iframe の書き込み、インライン Iframe の書き込み、および JavaScript を使用した Iframe の動的作成が含まれます。各書き方には独自の特徴と適用可能なシナリオがあります。実際のニーズに応じて、適切な書き込み方法を選択することで、必要な機能と効果を実現できます。

iframeの書き方にはどのようなものがあるのでしょうか？

Iframe は、Web ページ内に他の Web ページまたはドキュメントを埋め込むために使用される HTML 要素です。 iframe にはさまざまな記述方法が用意されており、ニーズに応じて適切な方法を選択できます。以下に、いくつかの一般的な Iframe 記述方法を示します:

1. 基本的な Iframe 記述方法:

このうち、src 属性は埋め込み Web ページまたはドキュメントの URL を指定するために使用され、width 属性と height 属性は埋め込み Web ページまたはドキュメントの URL を指定するために使用されます。それぞれ Iframe の幅と高さ。

2. ネストされた iframe の記述方法:

この記述方法では、複数の Iframe をネストして、多層ネスト効果を実現できます。内側の Iframe は外側の Iframe に表示されます。

3. 幅と高さを適応させた Iframe の記述方法:

<スタイル> .owned-iframe { position: 相対; padding-bottom: 56.25%; 高さ: 0; オーバーフロー: 非表示; } .owned-iframe iframe { position: 絶対; トップ: 0; 左: 0; 幅: 100%; 高さ: 100%; }style><div class= 「応答性の高い iframe」> <iframe src="URL" frameborder="0" allowfullscreen>iframe>##div>

この記述方法では、CSS を使用して幅と高さを適応させる効果を実現しています。Iframe はコンテナの幅に応じて、比率を変更せずに高さを自動的に調整します。

4. スタイルと属性を使用して Iframe を記述する方法:

この書き方は、frameborder、スクロールとallowfullscreen: Iframeの境界線、スクロールバー、全画面表示、その他の動作を制御します。

5. インライン Iframe の書き方:

Hello, World!

" width="幅" height ="Height">iframe>

この書き込みメソッドは、 src 属性を介して外部 URL を指定する代わりに、Iframe HTML コードを使用します。 HTML コンテンツを srcdoc 属性に記述して、インライン効果を実現できます。

6. JavaScriptを使用して動的にIframeを作成する記述方法:

<スクリプト> var iframe = document.createElement('iframe'); iframe.src = 'URL'; iframe.width = 'width'; iframe.height = 'height'; document.body.appendChild(iframe); script>