通常は「iframe」と呼ばれるインラインフレームは、HTML5で許可される唯一のタイプのフレームです。これらのフレームは本質的に、あなたがページを切り落としたセクションです。あなたがページから切り取ったスペースでは、外部のウェブページをフィードすることができます。本質的に、iframeはウェブページのすぐ内側に設定された別のブラウザウィンドウです。 Googleマップなどの外部コンテンツやYouTubeの動画を含める必要があるウェブサイトで一般的に使用されるiframeを選択します。これらの一般的なWebサイトでは、埋め込みコードでiframeを使用しています。
IFRAME要素の使用方法
この要素は、HTML5グローバル要素と他のいくつかの要素を使用します。 4つはHTML 4.01の属性です。
- - フレームのソースのURL
- - ウィンドウの高さ
- ウィンドウの幅
- - ウィンドウの名前
HTML5では3つの新しい機能が追加されました。
srcdoc- フレームのソースのHTML。この属性は、src属性サンドボックスフレームウィンドウで許可または禁止すべき機能のリストシームレス- iframeを親文書の目に見えないようにレンダリングする必要があることをユーザエージェントに通知する
単純なiframeを作成するには、ソースのURLと幅と高さを設定します。
iframeの設定にピクセル値を使用しないことを選択できますが、パーセンテージを使用することもできます。異なるサイズの画面でサイジングが変更されるレスポンシブウェブサイトを構築する場合は、これらの割合が重要になります。
HTML 4.01では有効ですが、HTML5では廃止された属性もあります。現在のウェブサイトのほとんどはHTML5 +を使用しているため、これらの属性は使用したくない属性です（ただし、一部の従来のドキュメントでは表示される可能性があります）。
- 代わりに、
A説明にリンクする要素 - 代わりに、CSSを使用します
浮くプロパティ allowtransparency代わりに、CSSを使用しますバックグラウンドiframを透明にするプロパティ- 代わりに
境界CSSプロパティ マージン高さ代わりに、CSSを使用しますマージンプロパティmarginwidth代わりに、CSSを使用しますマージンプロパティ- 代わりに、CSSを使用します
オーバーフロープロパティ
IFRAMEブラウザのサポート
ザ IFRAME 要素は現代のすべてのブラウザでサポートされています：
- アンドロイド
- クロム
- Firefox
- Internet Explorer 2以降
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- サファリ
上記のリストにバージョン番号が表示されていない場合は、そのバージョンのすべてのバージョンでサポートされているためです。
注意すべき点の1つは、すべてのブラウザが IFRAME HTML5の一部の機能はまだ限られています。
- 使用
オーバーフロースクロールをオフにすることは信頼できません。 iframeにスクロールバーが表示されないようにするには、引き続きスクロール属性。 - ザ
srcdoc,サンドボックス、およびシームレス現在のところ、属性はすべてのブラウザでサポートされていません。
Iframeとリンクする
iframeに 名 または id そのフレームであなたのリンクを指すことができます。 A 素子。ユーザーがリンクをクリックすると、現在のウィンドウではなく、参照されているiframe内で開きます。
自分で試してみてください。 Webページに次のように入力します。
これは私のiframeです
このリンクをクリックすると、上記のウィンドウ内に新しい文書が開きます。
id = "myIframe" src = "http://webdesign.about.com/#lp-main" height = "200px" width = "500px">
ドキュメントが IFRAME ターゲットが設定されていない場合、それらのリンクはすべて親ドキュメントと同じiframeで開きます。
この機能を使用して、1つのリンクを作成することができます IFRAME 別のコンテンツを変更する IFRAME 同じぺージに。
IFrameとセキュリティ
ザ IFRAME 要素は、それ自体で、あなたまたはあなたの読者にとってセキュリティリスクではありません。残念ながら、iframeは悪意のあるWebサイトで使用され、訪問者のコンピュータに感染する可能性のあるコンテンツをページに表示することなく使用できるため、評判が悪いです。これは、リンクが目に見えない IFRAME これらのスクリプトは悪質なコードを作り出しました。ユーザーはリンクをクリックし、何も起こっていないためリンクが壊れていると思っていますが、スクリプトが見えないところにスクリプトが設定されています。
目に見えないものを注入するコンピュータウィルスもあります IFRAME 効果的にウェブサイトをボットネットに変えることができます。 SQLインジェクションやその他の攻撃によってこれを行うことができます。
それを覚えておくべきこと IFRAME あなたのウェブページ上のあなたのユーザーはあなたがリンクしているすべてのサイトのコンテンツと同じくらい安全であるということです。サイトが信頼できないと感じる理由がある場合は、リンクを張らないでください。 IFRAME。ただし、iframe内の自分のページにリンクしても、あなたやあなたのユーザーにとってセキュリティ上のリスクはありません。
Jennifer Kryninのオリジナル記事。 Jeremy Girardによって11/7/16に編集されました
