HTML5のEmbedded Content～iframe要素とembed要素～
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
iframe要素
inline frameの略。
入れ子になったブラウジングコンテキスト(文書が表示される環境。ウィンドウやタブ)を表す。
<div>下に埋め込むよ1</div> <iframe src="iframe_nested.html" width="300" height="100" sandbox></iframe> <div>下に埋め込むよ2</div> <iframe srcdoc="<div><a href="/XXXXX/YYYY">埋め込まれたコンテンツ２だよ</a></div>" src="iframe_nested.html" width="300" height="100" sandbox></iframe>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・インタラクティブコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・必要に応じてテキスト
コンテンツ属性
・グローバル属性
・src - リソースのURL
・srcdoc - iframe内で描画したいドキュメント
・name - 入れ子にしたブラウジングコンテキスト名
・sandbox - 入れ子にしたコンテンツのセキュリティルール
・allowfullscreen - iframeのコンテンツをフルスクリーンで表示することを許可
・allowpaymentrequest - iframeのコンテンツがPaymentRequestインターフェイスを使用して支払い要求を行うことを許可されているか
・width - 横幅
・height - 高さ
・referrerpolicy - リファラポリシー
タグの記載場所
・エンベディッドコンテンツを配置できる場所
embed要素
外部（通常はHTML以外の）アプリケーションまたはインタラクティブコンテンツを埋め込む。
プラグインを使ったコンテンツの埋め込みに使う。(Flashなど。Flashは2020年には終わりを迎えるが・・)
<div>下に埋め込むよ1</div> <embed src="XXXXXXXYYYYY.swf" quality="high"></embed>
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・インタラクティブコンテンツ
・パルパブルコンテンツ
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・src - リソースのURL
・type - 埋め込まれたリソースの種類(有効なMIMEタイプを指定)
・width - 横幅
・height- 高さ
・他、プラグインで必要な属性を指定可能
タグの記載場所
・エンベディッドコンテンツを配置できる場所
