本教程详细阐述了嵌入式网页（如 `

在现代网页开发中，嵌入式网页（通常通过

window.parent 属性解析

window.parent 是一个全局属性，它返回当前窗口的父窗口的 window 对象。如果当前窗口没有父窗口（即它本身就是顶级窗口），或者父窗口与当前窗口不同源，那么 window.parent 将返回对当前窗口本身的引用（在同源情况下）或抛出安全错误（在跨源情况下）。

理解 window.parent 的关键在于，一旦你获得了父窗口的 window 对象，你就可以像操作当前窗口的 window 对象一样，访问父窗口的全局变量、函数，以及其 document 对象，进而操作父窗口的DOM。

实现子页面对父页面的操作

以下我们将通过具体的代码示例，演示子页面如何修改父页面的DOM内容以及调用父页面定义的函数。

1. 修改父页面 DOM 内容

子页面可以通过 window.parent.document 访问父页面的文档对象，然后利用标准的DOM操作方法（如 getElementById、querySelector、innerHTML 等）来修改父页面的内容。

主页面 (index.html) 示例：

    
    
    


    
主页面内容区域
    
这里是主页面的一段文本，等待子页面修改。

    
下方是嵌入的子页面：
    

子页面 (child.html) 示例：

    
    
    


    
子页面控制面板
    修改主页面内容

    

当用户点击子页面中的“修改主页面内容”按钮时，子页面会通过 window.parent.document.getElementById('parentMessage').innerHTML 来更新主页面中相应段落的文本。

2. 调用父页面定义的函数

除了修改DOM，子页面也可以直接调用父页面全局作用域中定义的 JavaScript 函数。

主页面 (index.html) 示例（在 标签底部添加脚本）：

子页面 (child.html) 示例（在 标签底部添加按钮和脚本）：

调用主页面函数

点击子页面中的“调用主页面函数”按钮，将会触发主页面定义的 greetParent 函数，并在主页面中弹出一个提示框。

重要注意事项：同源策略 (Same-Origin Policy)

在使用 window.parent 进行跨框架通信时，同源策略 (Same-Origin Policy) 是一个至关重要的安全限制。

• 什么是同源？ 两个页面如果具有相同的协议（protocol）、主机名（host）和端口号（port），则被认为是同源的。
• 同源策略的影响： 如果子页面和父页面不同源，那么子页面将无法直接访问父页面的 window 对象（包括 document 对象和其中定义的函数），反之亦然。任何尝试进行此类访问的操作都将被浏览器阻止，并抛出安全错误（通常是 SecurityError: Blocked a frame from accessing a cross-origin frame.）。

这意味着上述代码示例仅在 index.html 和 child.html 部署在同一个域名、同一个端口、使用相同协议的情况下才能正常工作。例如，如果 index.html 在 http://localhost:8080/，那么 child.html 也必须在 http://localhost:8080/ 下。

跨域通信的替代方案： 当父子页面不同源时，标准且安全的跨域通信方式是使用 window.postMessage() API。postMessage 允许不同源的窗口之间安全地发送消息，但它的实现方式与 window.parent 直接访问有所不同，需要明确的消息发送和接收机制，且不在本文的讨论范围之内。

总结

window.parent 属性为嵌入式网页提供了强大的能力，使其能够与父页面进行交互，包括修改DOM内容和调用JavaScript函数。然而，这种交互受到严格的同源策略限制。开发者在使用 window.parent 时，务必确保父子页面同源，以避免安全错误。在不同源的场景下，应考虑使用 window.postMessage() 等更安全的跨域通信机制。理解并正确应用这些机制，对于构建健壮且安全的Web应用至关重要。