Comprendre l'essence de l'iframe du début à la fin-tutoriel HTML-php.cn

Comprendre l'essence de l'iframe du début à la fin

王林

Libérer： 2024-01-07 09:33:48

original

830 Les gens l'ont consulté

Comprendre lessence de liframe du début à la fin

Comprenez l'essence de l'iframe du début à la fin

Iframe (Inline Frame) est une balise HTML utilisée pour intégrer une autre page Web dans une page Web. Il nous permet d'intégrer le contenu d'autres pages Web dans la page Web actuelle pour obtenir un affichage imbriqué de la page et une expansion des fonctions. Cet article analysera progressivement l'essence d'Iframe du début à la fin et fournira des exemples de code spécifiques.

L'essence d'Iframe est un document HTML indépendant, affiché sous la forme d'une fenêtre dans la page Web actuelle. Grâce à la balise Iframe, nous pouvons intégrer d'autres pages dans une page pour réaliser la segmentation des pages, l'expansion des fonctions et l'interaction des données. Le contenu de l'Iframe est indépendant de la page Web actuelle. Il possède son propre code HTML et ses propres styles CSS et peut être modifié et manipulé dynamiquement via JavaScript.

Vous trouverez ci-dessous un exemple de code qui montre comment utiliser Iframe pour intégrer une autre page Web dans la page Web actuelle.

<!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>

Copier après la connexion

Dans le code ci-dessus, nous avons intégré la page avec l'URL https://www.example.com à l'aide de la balise <iframe>. Le lien de la page à afficher est spécifié via l'attribut src, et la largeur et la hauteur de l'Iframe sont définies via les attributs width et height. . Après l'autre contenu de la page principale, on peut voir une page intégrée affichée sous la forme d'une fenêtre. <iframe>标签嵌入了网址为https://www.example.com的页面。通过src属性指定了要显示的页面链接，并且通过width和height属性设置了Iframe的宽度和高度。在主页面的其他内容之后，我们可以看到一个以窗口形式展示的被嵌入页面。

需要注意的是，由于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>

Copier après la connexion

在上述代码中，我们在主页面中输入文本内容，并在点击提交按钮时将输入的内容传递给嵌入页面。通过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>

Copier après la connexion

在上述代码中，我们通过addEventListener方法监听了主页面传递过来的message事件，获取事件对象的data

Il est à noter que l'Iframe disposant d'un document HTML indépendant, la page intégrée et la page principale sont indépendantes l'une de l'autre. Les variables et les fonctions ne peuvent pas être partagées directement entre elles et doivent être communiquées par d'autres moyens.

Peut interagir avec les pages intégrées à l'aide de JavaScript. Grâce à l'attribut contentWindow d'Iframe, nous pouvons intégrer l'objet fenêtre dans la page puis l'exploiter en utilisant JavaScript. L'exemple de code ci-dessous montre comment transmettre des données entre la page principale et la page intégrée via un événement de clic de bouton. 🎜rrreee🎜Dans le code ci-dessus, nous saisissons le contenu du texte dans la page principale et transmettons le contenu saisi à la page intégrée lorsque vous cliquez sur le bouton de soumission. Obtenez l'objet window de la page intégrée via l'attribut contentWindow et utilisez la méthode postMessage pour transmettre les données à la page intégrée. 🎜🎜Dans la page intégrée, nous pouvons écouter l'événement message via la méthode addEventListener, recevoir les données transmises depuis la page principale et effectuer les opérations correspondantes. Voici un exemple de code intégré dans la page : 🎜rrreee🎜Dans le code ci-dessus, nous écoutons l'événement message transmis depuis la page principale via la méthode addEventListener et obtenons l'attribut event object >data correspond aux données transmises depuis la page principale. Les données sont ensuite affichées sur la page. 🎜🎜Grâce aux exemples de code ci-dessus, nous pouvons comprendre l'essence d'Iframe du début à la fin et comment interagir entre la page principale et la page intégrée. Iframe propose un large éventail de scénarios d'application dans le développement Web et peut nous aider à mettre en œuvre des fonctions complexes et des expériences interactives riches sur la page. J'espère que cet article vous aidera à comprendre Iframe. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!