iframe の本質を最初から最後まで理解する-htmlチュートリアル-php.cn

iframe の本質を最初から最後まで理解する

王林

リリース： 2024-01-07 09:33:48

オリジナル

831 人が閲覧しました

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> タグを使用して、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 サイトの他の関連記事を参照してください。