HTML iframeタグの使用例解説

2022-01-17 04:20:52

iframeは一般的に他のページを含むために使用されます。例えば、私たちは自分のページに他の人のウェブサイトからコンテンツを読み込むことができ、より良い効果を得るために、iframeを透明にする必要があるかもしれません、そして私たちはiframe属性についてもっと知る必要があります。

I. iframeの定義と使用法

iframe 要素は、他の文書を含むインラインフレームを作成します（つまり、インラインフレーム）。
HTMLとXHTMLの違い
iframe 要素は HTML 4.1 Strict DTD および XHTML 1.0 Strict DTD ではサポートされていません。
ヒントとなるコメント
ヒント：iframeを理解できないブラウザに対応するために、<iframe>と</iframe>の間に必要なテキストを配置することができます。
iframeタグは、<iframe>で始まり、</iframe>で終わる2つの組で構成されています。
iframeタグの中のコンテンツは、ブラウザがiframeタグをサポートしていないかのように表示することができる

II. 属性

New : HTML5での新しい属性です。

<テーブル属性値説明整列左
右
トップ
中央
底面 HTML5ではサポートされていません。HTML4.01で非推奨となりました。周囲の要素に基づいて <iframe> をどのように整列させるかを指定します。フレームボーダー 1
0 HTML5では未対応。iframeの周囲のボーダーを表示するかどうかを指定します。高さピクセル iframe>の高さを指定します。 longdesc URL HTML5では未対応。iframe>の詳細な説明を含むページを指定します。マージンハイトピクセル HTML5では未対応。iframe> の上下の余白を指定します。マージン幅ピクセル HTML5では未対応。iframe> の左右の余白を指定します。名称名前 iframe>の名前を指定します。サンドボックス新規 ""
フォームを許可する
同一生成元を許可する
スクリプトを許可する
トップナビゲーションを許可する iframe>のコンテンツに関する一連の追加制限を定義します。スクロールはい
いいえ
オート HTML5では未対応。iframe>でスクロールバーを表示するかどうかを指定します。シームレス新規シームレス iframe>が親ドキュメントの一部のように見えることを指定します。 src URL iframe>に表示されるドキュメントのURLを指定します。 srcdoc 新規 HTML_コードページ内のHTMLコンテンツが<iframe>で表示されることを指定します。幅ピクセル iframe>の幅を指定します。

III. 例

1. iframe フレーム

コードは以下の通りです。

<iframe src="https://www.test.net" width="200" height="500"> 
This site uses framing technology, but your browser does not support frames, please upgrade your browser to access it properly. 
</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の高さの適応の問題であり、口の中のこの問題は、解決策を見つけるためにチームのブログをued、後でもっと透明iframeの問題が発生し、通常iframeの背景色は、メインページが全体を持っていれば異なるブラウザで、別の色を持っているかもしれません白いブロックがメインページとは不釣り合いな、iframe領域、に表示されますが必要iframe透明度の
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 の適応的な高さ

長いので、こちらに移動してご覧ください。

https://www.jb51.net/article/15780.htm

4. jsでiframe広告コードを出力する

[コード］

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>');

ユーザーのブラウザが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>

HTML iframeタグの使用例について紹介したこの記事は、より関連するHTML iframeタグの使用例の内容は、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続き閲覧してくださいスクリプトハウスを今後ともよろしくお願いします！。

HTML iframeタグの使用例解説

I. iframeの定義と使用法

II. 属性

III. 例

1. iframe フレーム

2. iframeの透過性

3. iframe の適応的な高さ

4. jsでiframe広告コードを出力する

関連

最新

おすすめ