contentwindow詳解

一、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>