iframeタグの使用詳細（属性、透明度、適応的な高さ）
2022-01-28 23:46:43
1. iframeの定義と使用法
iframe 要素は、別のドキュメントを含むインラインフレームを作成します（つまり、インラインフレーム）。
HTMLとXHTMLの違い
iframe 要素は HTML 4.1 Strict DTD および XHTML 1.0 Strict DTD でサポートされていません。
ヒントと注意点
ヒント：iframeを理解しないブラウザに対応するために、<iframe>と</iframe>の間に目的のテキストを配置することができます。
iframeタグは、<iframe>で始まり、</iframe>.で終わる、2つ1組で表示されます。
iframeタグの中のコンテンツは、ブラウザがiframeタグをサポートしていないかのように表示することができます。
属性
- 左
- 右
- トップ
- 中央
- ボトム
使用を不承認とする。 代わりにスタイルを使用してください。
このフレームを周囲の要素に応じてどのように整列させるかを指定します。
TF フレームボーダー- 1
- 0
- ピクセル
- %
- はい
- いいえ
- 自動
- ピクセル
- %
例
コピーコード
コードは以下の通りです。
<iframe src="https://www.jb51.net" width="200" height="500">
The Script House uses framing technology, but your browser does not support framing, please upgrade your browser to access the Script House properly.
</iframe>
iframeのフレームサイズをピクセルで定義する
コピーコード
コードは以下の通りです。
<iframe src="http://www.baidu.com" width="20%" height="50%">
The Script House uses framing technology, but your browser does not support framing, please upgrade your browser to access the Script House properly.
</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の高さ適応の問題で、これはWord of Mouth ued teamのブログで解決策が見つかり、次にiframeの透過の問題に遭遇しました。
通常、iframeのベースカラーは白ですが、ブラウザによって異なる場合があります。
メインページに全体の背景色や背景画像がある場合
この場合、iframe領域は白いブロックとして表示され、メインページと調和しないため、iframeの透過が必要となります。
iframe transparencyでググると解決策が見つかります。
コピーコード
コードは以下の通りです。
<iframe src=". /ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe> provided, of course, that there is no setting in the iframe page Color
[code]
Note: iframe transparency is mainly used with allowtransparency="true" style="background-color=transparent"
<strong>3. iframe adaptive height
</strong>Because of the length, you can move here to see
<a target="_blank" href="https://www.jb51.net/article/15780.htm">https://www.jb51.net/article/15780.htm< ;/a>
<strong>4, output iframe ad code via js
</strong>[code]
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 frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height=" ;200">
Your browser does not support embedded frames, or is currently configured not to display embedded frames.
</iframe>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン