|
<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/ 参照下さい モーダルウィンドウ
ポップアップウィンドウが表示
インラインフレーム内でページが表示されず親ウィンドウでページが表示 HTMLタグ一覧のリンクのアンカータグに
target="_top"を指定
上から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一覧
|
