contentwindow详解

原文链接：https://www.python100.com/html/90735.html

一、contentwindow的定义

contentwindow，也称为window对象，是指浏览器中一个包含网页内容的窗口，它具有多个属性和方法，可以用来获取和调整窗口的各种信息，以及进行各种操作。

contentwindow对象可以通过iframe、frame、window.open()等方式获取，其中以iframe获取最为常见。在一个iframe中，contentwindow对象为全局window对象的一个子孙对象（即window.parent.frames[0].contentWindow），它包含了iframe中加载的网页内容，可以通过contentDocument属性来操作其中的DOM元素。

二、contentwindow的属性与方法

1、location

location属性可以用来获取或设置窗口中当前网页的URL地址，是一个Location对象。可以通过location.assign()方法来重定向到另一个URL地址。

    <script>
        console.log(window.location.href); // 输出当前窗口的URL地址
        window.location.assign("https://www.baidu.com"); // 重定向到百度首页
    </script>

2、document

document属性返回当前窗口的Document对象，可以用来获取和操作网页中的DOM元素。

    <script>
        var title = window.document.title; // 获取网页标题
        var p = window.document.createElement("p"); // 创建一个p元素
        p.innerHTML = "Hello World!"; // 设置p元素的内容
        window.document.body.appendChild(p); // 将p元素添加到body中
    </script>

3、parent

parent属性返回当前窗口的父级窗口对象，可以用来在嵌套的iframe中进行跨框架通信。

    <!-- 父级网页 -->
    <iframe src="child.html" id="myframe"></iframe>
    <script>
        var iframe = window.document.getElementById("myframe");
        var childWindow = iframe.contentWindow; // 获取子窗口对象
        childWindow.postMessage("Hello, Child Window!", "http://localhost:8080"); // 向子窗口发送消息
    </script>
    
    <!-- 子级网页 -->
    <script>
        window.addEventListener("message", function(event) {
            console.log(event.data); // 输出从父级窗口接收到的消息
            event.source.postMessage("Hello, Parent Window!", event.origin); // 向父级窗口发送消息
        }, false);
    </script>

4、open

open方法可以用来打开一个新窗口或标签页，并在其中加载指定的URL地址。

    <script>
        window.open("https://www.baidu.com", "_blank", "width=800,height=600"); // 在新的标签页中打开百度首页
    </script>

5、scroll

scroll属性可以用来获取或设置窗口中滚动条的位置。scrollTo()和scrollBy()方法可以用来滚动窗口。

    <script>
        console.log(window.scrollX, window.scrollY); // 输出当前窗口滚动条的位置
        window.scrollTo(0, 500); // 将窗口滚动至纵坐标500位置
        window.scrollBy(0, 100); // 将窗口向下滚动100像素
    </script>

三、contentwindow在跨域通信中的应用

由于同源策略限制，iframe中的JavaScript无法直接访问或修改它所嵌入的页面的DOM元素，也无法与其进行通信。但是，contentwindow对象提供的postMessage()方法可以用来在不同域之间安全地传递消息。

    <!-- 父级网页 -->
    <iframe src="http://child.domain.com" id="myframe"></iframe>
    <script>
        var iframe = window.document.getElementById("myframe");
        var childWindow = iframe.contentWindow; // 获取子窗口对象
        childWindow.postMessage("Hello, Child Window!", "http://child.domain.com"); // 向子窗口发送消息
    </script>
    
    <!-- 子级网页 -->
    <script>
        window.addEventListener("message", function(event) {
            console.log(event.data); // 输出从父级窗口接收到的消息
            event.source.postMessage("Hello, Parent Window!", event.origin); // 向父级窗口发送消息
        }, false);
    </script>