如何从内嵌的Svelte应用中访问iframe所在文档的变量？

同域场景（父页面与iframe内Svelte应用域名一致） #

直接通过window.parent访问父文档的全局变量即可，但要确保父页面的变量是挂载在window对象上的全局变量，而非局部变量。

示例代码：
父页面定义变量：

// 父页面全局变量
window.parentGlobal = "这是父页面的变量";

Svelte组件中访问：

<script>
  const parentVar = window.parent.parentGlobal;
  console.log(parentVar); // 输出 "这是父页面的变量"
</script>

跨域场景（父页面与iframe应用域名不同） #

浏览器的同源策略会直接拦截跨域的window.parent访问，需要通过以下两种方式解决：

1. 使用postMessage进行跨域通信

这是最安全且通用的方案，通过消息传递实现变量交互，必须验证消息来源域名以避免安全风险。

• 父页面监听并响应请求：

window.addEventListener('message', (event) => {
  // 严格验证iframe的来源域名
  if (event.origin !== 'https://your-iframe-app-domain.com') return;
  
  if (event.data.type === 'request-parent-var') {
    // 发送变量给iframe
    event.source.postMessage({
      type: 'response-parent-var',
      data: window.parentGlobal
    }, event.origin);
  }
});

• Svelte组件中请求并接收变量：

<script>
  let parentVar = null;

  // 监听父页面的响应
  window.addEventListener('message', (event) => {
    if (event.data.type === 'response-parent-var') {
      parentVar = event.data.data;
    }
  });

  // 向父页面发送请求
  window.parent.postMessage(
    { type: 'request-parent-var' },
    'https://your-parent-page-domain.com'
  );
</script>

<p>从父页面获取的变量：{parentVar}</p>

2. 同主域子域名配置（仅限特殊场景）

如果父页面和iframe属于同主域的不同子域名（如a.yourdomain.com和b.yourdomain.com），可以在双方页面的代码开头设置：

document.domain = 'yourdomain.com';

设置完成后即可通过window.parent直接访问父页面的全局变量，但这种方式安全性较低，优先推荐postMessage方案。

内容的提问来源于stack exchange，提问作者angelo alamia