HTML: HTML iframe

<!-- シンプルなページを埋め込み、幅600px、高さ400px -->
<iframe src="https://example.com" width="600" height="400">
お使いのブラウザはiframeをサポートしていません。
</iframe>

<!-- 名前付きiframe -->
<iframe src="about:blank" name="content-frame"
width="100%" height="300"></iframe>

<!-- targetを使ってリンクをiframe内で開く -->
<a href="https://www.wikipedia.org" target="content-frame">
Wikipediaをiframeで開く
</a>
<a href="https://www.example.com" target="content-frame">
Exampleをiframeで開く
</a>

<!-- 最も厳格なsandbox：すべての高度な機能を無効化 -->
<iframe src="https://example.com" sandbox=""></iframe>

<!-- スクリプトを許可するが、フォーム送信とポップアップをブロック -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

<!-- スクリプトとフォームを許可するが、ポップアップやナビゲーションなどはブロック -->
<iframe src="https://example.com"
sandbox="allow-scripts allow-forms"></iframe>

<!-- YouTube動画を埋め込む -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube動画プレーヤー"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<!-- Googleマップを埋め込む -->
<iframe width="600" height="450"
src="https://www.google.com/maps/embed?pb=..."
title="Googleマップ"
allowfullscreen
loading="lazy"></iframe>

<!-- 親ページがメッセージを送信 -->
<iframe src="https://other-domain.com/page"
id="myFrame" title="クロスオリジンページ"></iframe>
<script>
var frame = document.getElementById('myFrame');
frame.contentWindow.postMessage('こんにちは、iframe！', 'https://other-domain.com');
</script>

<!-- iframe内部でメッセージを受信（埋め込みページに記述する必要あり） -->
<script>
window.addEventListener('message', function(event) {
// 常にオリジンを検証！
if (event.origin !== 'https://parent-domain.com') return;
console.log('受信しました：', event.data);
});
</script>