Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<fencedframe>
実験的
126
126
126
HTML 属性
target (unfencedTop)
実験的

_unfencedTop`の値

126
126
126
allow
実験的
126
126
126
height
実験的
126
126
126
width
実験的
126
126
126
DOM API
Fence
実験的

Fenced Frame API の Fence インターフェイスには、fencedframe の機能に関連するいくつかの関数が含まれています。

126
126
126

Fence インターフェースの getNestedConfigs() メソッドは、現在の 内に埋め込まれた にロードされた FencedFrameConfigs を返します。

126
126
126
reportEvent
実験的

Fence インターフェイスの reportEvent() メソッドは、広告オークションの結果を収集する目的で、Protected Audience API の InterestGroupReportingScriptRunnerGlobalScope.registerAdBeacon メソッド経由で登録された 1 つ以上の特定の URL へのビーコン経由のレポート データの送信をトリガーします。

126
126
126

Fence インターフェイスの setReportEventDataForAutomaticBeacons() メソッドは、fencedframe 内でナビゲーションが発生したときに送信されるイベント データを指定します。 このデータは、自動ビーコンを介して、Protected Audience API の InterestGroupReportingScriptRunnerGlobalScope.registerAdBeacon メソッドを介して登録された 1 つ以上の特定の URL に送信されます。

126
126
126

FencedFrameConfig インターフェイスは、fencedframe のナビゲーション、つまり、そこに表示されるコンテンツを表します。

126
126
126

FencedFrameConfig インターフェイスの setSharedStorageContext() メソッドは、埋め込みドキュメントから の共有ストレージにコンテキスト データを渡します。

126
126
126

HTMLFencedFrameElement インターフェイスは、JavaScript のフェンスドフレーム要素を表し、構成プロパティを提供します。

126
126
126
allow
実験的

HTMLFencedFrameElement のallowプロパティは、対応するfencedframeのallow属性の値を取得および設定します。この属性は、コンテンツが最初に埋め込まれるときにコンテンツに適用されるアクセス許可ポリシーを表します。

126
126
126
config
実験的

HTMLFencedFrameElement の config プロパティには、FencedFrameConfig オブジェクトが含まれています。これは、FencedFrame のナビゲーション、つまり、FencedFrame 内に表示されるコンテンツを表します。 FencedFrameConfig は、Protected Audience API などのソースから返されます。

126
126
126
height
実験的

HTMLFencedFrameElement の height プロパティは、要素の高さを指定する、対応する FencedFrame の高さ属性の値を取得および設定します。

126
126
126
sandbox
実験的
126
126
126
width
実験的

HTMLFencedFrameElement の width プロパティは、要素の幅を指定する、対応する FencedFrame width 属性の値を取得および設定します。

126
126
126

deprecatedReplaceInURN() は Navigator インターフェイスのメソッドで、指定された不透明 URN または FencedFrameConfig の内部 url プロパティに対応する割り当てられた URL 内の指定された文字列を置換します。

128
128
128
fence
実験的

fence は、Window インターフェイスの読み取り専用のプロパティであり、現在の文書コンテキストに対応する Fence オブジェクトインスタンスを返します。

126
126
126
その他

HTTP の Content-Security-Policy (CSP) における fenced-frame-src ディレクティブは、ディレクティブは、 fencedframe 要素に読み込まれた、埋め込まれた閲覧コンテキストの有効なソースを指定します。

126
126
126
fencedframe
実験的

fencedframe`の値

126
126
126
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML
<fencedframe
  width="320" height="50"
  mode="opaque-ads">
</fencedframe>

ライブデモ

Minimal markup

A fenced frame has no src attribute. It stays blank until a FencedFrameConfig is assigned to its config property.

プレビュー全画面表示

Attributes it accepts

width and height default to 300x150. allow only takes privacy-related permissions policies.

プレビュー全画面表示

Side by side with iframe

The iframe renders its srcdoc immediately. The fenced frame has no equivalent attribute, so nothing appears.

プレビュー全画面表示

実務での使いどころ

  • <fencedframe> の活用

    <fencedframe> は HTML の要素で、現在の HTML ページに別のページを埋め込む、ネストされた閲覧コンテキストを表します。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。