HTML
iframe の sandbox で JS が動かない
iframeのsandbox属性でJSが動かない
こんな症状
iframeにsandbox属性をつけたら中のJavaScriptが動かなくなった。allow-scriptsを追加しよう。
まず試す
sandbox="allow-scripts" を追加する（必要なら allow-same-origin・allow-forms も）。
html
<iframe src="page.html" sandbox="allow-scripts allow-same-origin"></iframe>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓中のJSが動かない
→ sandbox に allow-scripts を足す。 - ✓フォーム送信もできない
→ allow-forms を足す。 - ✓そもそも制限が不要
→ sandbox 属性自体を外す。
なぜ起きる？
sandbox属性を指定すると、デフォルトでスクリプト実行・フォーム送信・ポップアップなどすべてが制限されるよ。必要な権限を個別にallow-xxxで許可する必要がある。
✕ エラーが起きるコード
<iframe src="page.html" sandbox></iframe>
<!-- sandbox単体だとJS実行が禁止される -->✓ 直したコード
<iframe src="page.html" sandbox="allow-scripts allow-same-origin"></iframe>
<!-- 必要な権限を明示的に許可 -->✅ 直ったか確認
iframe 内のJSが期待どおり動けばOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- リンクをクリックしても何も起きない — href 属性の書き忘れ
- フォームの送信ボタンが動かない — type="submit" の書き忘れ
- iframeが表示されない — 埋め込み先がiframeを拒否している
- iframeの高さが合わない — iframe の高さが固定されている
- 画像が表示されない — 画像パスが間違っている
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説