js子页面访问父页面的变量

在JavaScript中，子页面（通常是通过iframe嵌入的页面）可以通过window.parent对象来访问父页面的变量。这是因为window.parent指向了包含当前窗口的父窗口。以下是一些基础概念和相关信息：

基础概念

1. 同源策略：出于安全考虑，浏览器实施了同源策略，这意味着只有来自相同协议、域名和端口的页面才能相互访问对方的资源。如果子页面和父页面不同源，那么子页面将无法直接访问父页面的变量。
2. window.parent：这是指向包含当前窗口的父窗口的全局对象。通过这个对象，子页面可以访问父页面的window对象及其属性和方法。

相关优势

• 代码复用：子页面可以重用父页面中定义的变量和函数，减少重复代码。
• 模块化设计：通过将功能分割到不同的页面中，可以实现更清晰的模块化设计。

类型与应用场景

• 全局变量访问：子页面可以直接读取和修改父页面中定义的全局变量。
• 函数调用：子页面可以调用父页面中定义的函数。
• 跨文档消息传递：对于不同源的页面，可以使用window.postMessage方法进行安全的跨文档通信。

示例代码

假设父页面有一个全局变量parentVar和一个函数parentFunction：

<!-- 父页面 -->
<script>
  var parentVar = "Hello from parent!";
  
  function parentFunction() {
    alert("This is a function from the parent page.");
  }
</script>

子页面可以通过以下方式访问这些变量和函数：

<!-- 子页面 -->
<script>
  // 访问父页面的全局变量
  console.log(window.parent.parentVar); // 输出: Hello from parent!

  // 调用父页面的函数
  window.parent.parentFunction(); // 弹出: This is a function from the parent page.
</script>

遇到的问题及解决方法

问题：跨域访问被阻止

如果子页面尝试访问不同源的父页面的变量，浏览器会抛出安全错误。

解决方法：

• 使用window.postMessage：这是一个安全的跨域通信方法。

// 父页面监听消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return; // 安全检查
  console.log(event.data); // 处理接收到的数据
});

// 子页面发送消息
window.parent.postMessage('Hello from iframe!', 'http://example.com');

• 服务器端代理：通过服务器端脚本中转请求，绕过浏览器的同源策略限制。

注意事项

• 在使用window.parent进行跨页面操作时，务必注意安全性，避免未授权的数据访问或操作。
• 在实际应用中，应当对传递的数据进行验证和过滤，以防止潜在的安全风险。

通过上述方法，可以在遵守同源策略的前提下，实现子页面与父页面之间的安全通信和资源共享。