iframe タグの使用方法の詳細な説明 (属性、透明度、適応高さ)

iframe タグの使用方法の詳細な説明 (属性、透明度、適応高さ)

1. iframe の定義と使用法

iframe 要素は、別のドキュメントを含むインライン フレーム (またはインライン フレーム) を作成します。

HTML と XHTML の違い

HTML 4.1 Strict DTD および XHTML 1.0 Strict DTD では、iframe 要素はサポートされていません。

ヒントと注意事項:

ヒント: iframe を理解しないブラウザに対応するために、必要なテキストを <iframe> と </iframe> の間に配置できます。

iframe タグは、<iframe> で始まり </iframe> で終わるペアで表示されます。

ブラウザがiframeタグをサポートしていない場合でも、iframeタグ内のコンテンツを表示できます。

財産

財産価値説明するDTD
整列する
  • トップ
  • 真ん中

非推奨。代わりにスタイルを使用してください。

このフレームを周囲の要素に対してどのように配置するかを指定します。

TF
フレームボーダー
  • 1
  • 0
フレームの周囲に境界線を表示するかどうかを指定しますTF
身長
  • ピクセル
  • %
iframe の高さを指定します。 TF
長い説明メールアドレスiframe のより長い説明が含まれるページを指定します。 TF
マージン高さピクセルiframe の上部と下部の余白を定義します。 TF
余白幅ピクセルiframe の左余白と右余白を定義します。 TF
名前フレーム名iframe の名前を指定します。 TF
スクロール
  • はい
  • いいえ
  • 自動車
iframe にスクロール バーを表示するかどうかを指定します。 TF
ソースメールアドレスiframe に表示されるドキュメントの URL を指定します。 TF
  • ピクセル
  • %
iframe の幅を定義します。 TF




コードをコピー
コードは次のとおりです。

<iframe src="https://www.jb51.net" 幅="200" 高さ="500">
123WORDPRESS.COM はフレーム技術を使用していますが、お使いのブラウザはフレームをサポートしていません。123WORDPRESS.COM に通常通りアクセスするには、ブラウザをアップグレードしてください。
</iframe>

iframeのサイズをピクセル単位で定義する

コードをコピー
コードは次のとおりです。

<iframe src="http://www.baidu.com" 幅="20%" 高さ="50%">
123WORDPRESS.COM はフレーム技術を使用していますが、お使いのブラウザはフレームをサポートしていません。123WORDPRESS.COM に通常通りアクセスするには、ブラウザをアップグレードしてください。
</iframe>

パーセンテージを使用して iframe フレームのサイズを定義する

2. iframeの透明度

transparentBody.htm ファイルの <body> タグに、style="background-color=transparent" を追加しました。次の 4 つの IFRAME 記述方法により、iframe の透明な背景効果を実現する方法が明確に理解できたと思います。


コードをコピー
コードは次のとおりです。

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>


iframe は、iframe を使用するとさらに多くの問題が発生するため、最後の手段としてのみ使用されます。また、一部のブラウザでは、iframe を広告としてブロックするように設定できます。

最近の作業で iframe を使用しました。最初に遭遇した問題は、iframe の適応性の高さの問題でした。この問題の解決策は、Koubei.com の ued チームのブログで見つけました。その後、iframe の透明性の問題に遭遇しました。

通常、iframe の背景色は白ですが、ブラウザによって色が異なる場合があります。

メインページに全体的な背景色または背景画像がある場合

iframe 領域に白いブロックが表示されますが、これはメイン ページと一致しないため、iframe を透明にする必要があります。

Googleでiframeの透明性を検索して解決策を見つけました

コードをコピー
コードは次のとおりです。

<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe> もちろん、iframeページには色が設定されていないことが前提です。
[コード]
注: iframe の透明度は主に allowtransparency="true" style="background-color=transparent" を使用します。
3. iframe の適応高さ
</strong>記事が長すぎるため、ここをクリックしてご覧ください。
<a target="_blank" href="https://www.jb51.net/article/15780.htm">https://www.jb51.net/article/15780.htm</a>
4. js 経由で iframe 広告コードを出力する
</strong>[コード]
document.write('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');


5. ユーザーのブラウザがiframeタグをサポートしているかどうかを考慮する必要がある場合は、次のように記述する必要があります。


コードをコピー
コードは次のとおりです。

<iframe フレームボーダー="0" 名前="Iframe1" src="https://www.jb51.net/" 幅="100%" 高さ="200">
お使いのブラウザは iframe をサポートしていないか、現在 iframe を表示しないように設定されています。
</iframe>

<<:  ブラウザがクロージャをどのように認識するかについて詳しく説明します

>>:  Ubuntu で nginx を使用して WebDAV ファイル サーバーを構築する詳細なプロセス

推薦する

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

Hadoop 2.Xの新機能、ごみ箱機能の説明

ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロ...

Linux Jenkins 構成スレーブノード実装プロセス図

序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...

LinuxでPythonの組み込みバージョンを削除する手順の詳細な説明

大きな落とし穴、Linuxシステムに付属するPythonのバージョンを簡単に削除しないでください1....

HTML シンボルからエンティティへのアルゴリズムのチャレンジ

チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...

Linux Cron によるパラメータ付き PHP コードのスケジュール実行

1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...

MySQLカスタム関数の原理と使用法の分析

この記事では、例を使用して MySQL カスタム関数の原理と使用方法を説明します。ご参考までに、詳細...

IIS7~IIS8.5 サーバープロトコルヘッダーの削除または変更

要件: IIS 7、7.5、8.0、8.5、および ASP.NET で HTTP 応答ヘッダーを削除...

Linux のロード vmlinux デバッグ

gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...

MySQL の null 制約のケースの説明

目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...

JS 関数とコンストラクタを簡単に理解する

目次1. 概要1.1 Functionコンストラクタを使用して関数を作成する1.2 機能と目的2. ...

Linux/Mac MySQL パスワードを忘れた場合のパスワード変更コマンドラインメソッド

すべての前提条件にはルート権限が必要です1. MySQLプロセスを終了する //Linux sudo...