HTML の iframe 要素の srcdoc 属性で埋め込まれる文書の URL ― 2021年12月15日 23時21分
この記事は HTML アドベントカレンダーの 15 日目の分です。
iframe 要素 のsrcdoc 属性の値に HTML 文書のソースコードを記述すると、その HTML 文書を埋め込んだフレームが生成されます。ここで、埋め込まれた HTML 文書の URL はどうなっているでしょうか。
<!-- iframe 要素を含む文書の URL は https://www.example.com/ であるとする。 -->
<iframe srcdoc="
<a href="foo?bar=42&amp;baz=23">Link</a>
<script>
console.log(location.href);
// => "about:srcdoc"
console.log(document.querySelector('a').href);
// => "https://www.example.com/foo?bar=42&baz=23"
</script>
"></iframe>埋め込まれた文書の URL は about:srcdoc ですが、その文書内のリンクにおいては「iframe 要素を含む文書の URL」を基底 URL として相対 URL が解決されます。
base 要素を使えば文書の URL と異なる URL を基底 URL として使えますが、srcdoc 属性を使って埋め込まれた文書では base 要素がなくてもそのような状態になっているのですね。<iframe src="about:blank"> で埋め込まれた文書も同様の状態になります。
ちなみに、srcdoc 属性で埋め込まれた HTML 文書では文書型宣言 (<!DOCTYPE html>) が省略可能であり、省略した場合も標準準拠モードで描画されます。また、title 要素も省略可能となります。html、head、body の各要素の開始タグおよび終了タグはもともと省略可能なため、body 要素の内容が「body 要素内にしか出現しえない要素」から始まるのなら、その要素の開始タグから記述を開始できます。
コメント
トラックバック
このエントリのトラックバックURL: http://nanto.asablo.jp/blog/2021/12/15/9448291/tb
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※投稿には管理者が設定した質問に答える必要があります。