ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd byGoogle

インラインフレームの動作に制限をかける

<iframe src="" sandbox>~</iframe>でインラインフレームの動作にセキュリティによる制限をかける ことができます。

sandbox属性にsandbox=""のように以下の値を入れた場合は制限を解除できます。各動作の説明です。

動作の説明
allow-forms フォームの送信を有効にする。
allow-scripts スクリプトの実行を有効にする。
allow-modals モーダルウィンドウの実行を有効にする。
allow-top-navigation インラインフレーム内の文書から別のウィンドウに移動できるようにする。 <a href="URL" target="_top">~</a>とtarget="_top"を指定しているので 親ウィンドウへ移動できる
Sallow-orientation-lock ScreenOrientation APIによるスクリーンの方向の操作を有効にする。
allow-popups ポップアップウィンドウが開くことを有効にする。
allow-pointer-lock Pointer Lock APIの使用を有効にする。

【ブラウザ表示】(Firefox 69.0で表示確認済み)

フォームの送信が有効になる
文字の上にマウス乗せると画像が表示
https://tech-dig.jp/js-modal/ 参照下さい モーダルウィンドウ
ポップアップウィンドウが表示
インラインフレーム内でページが表示されず親ウィンドウでページが表示

上から3番目と4番目はjavascriptも許可しないと機能しません

ソース

<iframe src="seigen_sample.html" sandbox="allow-forms"></iframe>
<iframe src="seigen_sample2.html" sandbox="allow-scripts"></iframe>
<iframe src="https://tech-dig.jp/demo/pop-up-1/" sandbox="allow-modals allow-scripts"></iframe>
<iframe src="seigen_sample3.html" sandbox="allow-popups allow-scripts"></iframe>
<iframe src="seigen_sample4.html" sandbox="allow-top-navigation"></iframe>

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧

このエントリーをはてなブックマークに追加