ホームページ >ウェブフロントエンド >htmlチュートリアル >iframe の本質を最初から最後まで理解する
iframe の本質を最初から最後まで理解する
- 王林オリジナル
- 2024-01-07 09:33:48865ブラウズ
iframe の本質を最初から最後まで理解する
Iframe (インライン フレーム) は、Web ページに別の Web ページを埋め込むために使用される HTML のタグです。現在のWebページに他のWebページのコンテンツを埋め込み、ページの入れ子表示や機能拡張を実現します。この記事では、Iframe の本質を最初から最後まで徐々に分析し、具体的なコード例を示します。
Iframe の本質は、現在の Web ページにウィンドウの形式で表示される独立した HTML ドキュメントです。 Iframe タグを使用すると、ページ内に他のページを埋め込んで、ページの分割、機能の拡張、データの相互作用を実現できます。 Iframe 内のコンテンツは現在の Web ページから独立しており、独自の HTML コードと CSS スタイルを持ち、JavaScript を通じて動的に変更および操作できます。
以下は、Iframe を使用して現在の Web ページ内に別の Web ページを埋め込む方法を示すサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<title>Iframe示例</title>
</head>
<body>
<h1>主页面</h1>
<iframe src="https://www.example.com" width="500" height="300"></iframe>
<p>这是主页面的内容。</p>
</body>
</html>上記のコードでは、<iframe></iframe> タグを使用して、URL https://www.example.com のページを埋め込みました。表示されるページ リンクは src 属性で指定され、Iframe の幅と高さは width 属性と height 属性で設定されます。メイン ページの他のコンテンツの後に、埋め込みページがウィンドウの形式で表示されていることがわかります。
Iframe は独立した HTML ドキュメントを持つため、埋め込みページとメイン ページは互いに独立していることに注意してください。変数と関数はそれらの間で直接共有できないため、他の手段を通じて通信する必要があります。
JavaScript を使用して埋め込みページを操作できます。 Iframe の contentWindow プロパティを通じて、ページに埋め込まれたウィンドウ オブジェクトを取得し、JavaScript を使用してそれを操作できます。以下のサンプル コードは、ボタン クリック イベントを介してメイン ページと埋め込みページの間でデータを渡す方法を示しています。
<!DOCTYPE html>
<html>
<head>
<title>页面间数据传递</title>
</head>
<body>
<h1>主页面</h1>
<p>请输入内容：</p>
<input id="inputValue" type="text">
<button id="submitButton">提交</button>
<iframe id="myFrame" src="iframe.html" width="500" height="300"></iframe>
<script>
var iframe = document.getElementById("myFrame");
var inputValue = document.getElementById("inputValue");
var submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", function() {
var value = inputValue.value;
var iframeWindow = iframe.contentWindow;
iframeWindow.postMessage(value, "*");
});
</script>
</body>
</html>上記のコードでは、メイン ページにテキスト コンテンツを入力し、送信ボタンがクリックされたときに入力されたコンテンツを埋め込みページに渡します。 contentWindow プロパティを通じて埋め込みページのウィンドウ オブジェクトを取得し、postMessage メソッドを使用して埋め込みページにデータを渡します。
埋め込みページでは、addEventListener メソッドを通じて message イベントをリッスンし、メイン ページから渡されたデータを受信し、対応する操作を実行できます。以下は、ページに埋め込まれたサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<title>Iframe嵌入页面</title>
</head>
<body>
<h1>嵌入页面</h1>
<p id="output"></p>
<script>
window.addEventListener("message", function(event) {
var value = event.data;
var output = document.getElementById("output");
output.innerHTML = "接收到的数据：" + value;
});
</script>
</body>
</html> 上記のコードでは、addEventListener メソッドを通じてメイン ページから渡される message イベントをリッスンします。を実行し、イベント オブジェクトを取得します。 data 属性は、メイン ページから渡されたデータです。その後、データがページに表示されます。
上記のコード例を通じて、Iframe の本質を最初から最後まで理解することができ、メイン ページと埋め込みページの間で対話する方法を理解できます。 iframe には Web 開発における幅広いアプリケーション シナリオがあり、ページ上で複雑な機能や豊富なインタラクティブ エクスペリエンスを実装するのに役立ちます。この記事が iframe を理解するのに役立つことを願っています。
以上がiframe の本質を最初から最後まで理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。