iframe의 본질을 처음부터 끝까지 이해-HTML 튜토리얼-php.cn

iframe의 본질을 처음부터 끝까지 이해

王林

풀어 주다： 2024-01-07 09:33:48

원래의

838명이 탐색했습니다.

iframe의 본질을 처음부터 끝까지 이해

iframe의 본질을 처음부터 끝까지 이해하세요

Iframe(인라인 프레임)은 웹 페이지 내에 다른 웹 페이지를 삽입하는 데 사용되는 HTML의 태그입니다. 이를 통해 다른 웹페이지의 콘텐츠를 현재 웹페이지에 삽입하여 페이지의 중첩된 표시와 기능 확장을 달성할 수 있습니다. 이 글에서는 Iframe의 본질을 처음부터 끝까지 점진적으로 분석하고 구체적인 코드 예시를 제공하겠습니다.

Iframe의 핵심은 현재 웹페이지에 창 형태로 표시되는 독립적인 HTML 문서입니다. Iframe 태그를 통해 페이지 분할, 기능 확장 및 데이터 상호 작용을 달성하기 위해 페이지에 다른 페이지를 삽입할 수 있습니다. Iframe의 콘텐츠는 현재 웹페이지와 독립적이며 자체 HTML 코드와 CSS 스타일을 가지며 JavaScript를 통해 동적으로 수정 및 조작될 수 있습니다.

아래는 Iframe을 사용하여 현재 웹페이지 내에 다른 웹페이지를 삽입하는 방법을 보여주는 샘플 코드입니다.

<!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>标签嵌入了网址为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>

로그인 후 복사

在上述代码中，我们在主页面中输入文本内容，并在点击提交按钮时将输入的内容传递给嵌入页面。通过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은 독립적인 HTML 문서를 가지고 있기 때문에 삽입된 페이지와 메인 페이지가 서로 독립적이라는 점에 유의하세요. 변수와 함수는 서로 직접 공유할 수 없으며 다른 수단을 통해 통신해야 합니다.

JavaScript를 사용하여 삽입된 페이지와 상호 작용할 수 있습니다. Iframe의 contentWindow 속성을 통해 페이지에 포함된 창 개체를 가져온 다음 JavaScript를 사용하여 작동할 수 있습니다. 아래 샘플 코드는 버튼 클릭 이벤트를 통해 기본 페이지와 포함된 페이지 간에 데이터를 전달하는 방법을 보여줍니다. 🎜rrreee🎜위 코드에서는 메인 페이지에 텍스트 내용을 입력하고 제출 버튼을 클릭하면 입력된 내용을 삽입된 페이지로 전달합니다. contentWindow 속성을 통해 삽입된 페이지의 창 개체를 가져오고 postMessage 메서드를 사용하여 삽입된 페이지에 데이터를 전달합니다. 🎜🎜임베디드 페이지에서는 addEventListener 메소드를 통해 message 이벤트를 수신하고, 메인 페이지에서 전달된 데이터를 수신하여 해당 작업을 수행할 수 있습니다. 다음은 페이지에 포함된 샘플 코드입니다. 🎜rrreee🎜위 코드에서는 addEventListener 메소드를 통해 메인 페이지에서 전달된 message 이벤트를 수신하고 이벤트 객체 >data 속성은 메인 페이지에서 전달된 데이터입니다. 그러면 데이터가 페이지에 표시됩니다. 🎜🎜위의 코드 예시를 통해 Iframe의 본질을 처음부터 끝까지 이해할 수 있으며, 메인 페이지와 임베디드 페이지 간의 상호 작용 방법을 이해할 수 있습니다. Iframe은 웹 개발에 있어 광범위한 애플리케이션 시나리오를 갖고 있으며 페이지에서 복잡한 기능과 풍부한 대화형 경험을 구현하는 데 도움을 줄 수 있습니다. 이 글이 Iframe을 이해하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 iframe의 본질을 처음부터 끝까지 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!