在前端开发中，跨域是绕不开的话题。其中'跨子域'作为特殊场景（如 a.example.com 与 b.example.com），因主域一致、子域不同，既有别于完全跨域，也存在专属的通讯技巧和避坑点。
多数文章仅罗列可用方案，却忽略了选型逻辑和落地细节。本文将从痛点拆解、方案深度解析、避坑指南到最佳实践，真正讲透跨子域通讯。
一、核心痛点：区别于普通跨域
跨子域的核心特点是「主域相同，子域不同」，这决定了它的特殊性：
- 同源策略限制：浏览器要求协议、域名、端口三者一致。子域不同仍属跨域，无法直接访问彼此的 window 对象、Cookie 或 LocalStorage。
- 主域关联性：不同于完全跨域，跨子域可利用主域特性简化实现（如共享主域 Cookie），无需配置复杂的 CORS 头。
- 场景高频且复杂：常见于大型项目的子模块拆分（电商的商品域、用户域、支付域），需实现状态同步、数据传递和方法调用，同时要保证兼容性和安全性。
关键区分：跨子域 ≠ 完全跨域。后者依赖 CORS、JSONP，前者可利用主域优势更高效、更安全地通讯。
二、核心方案：从易到难，落地场景
以下方案按实现成本排序，重点解读差异化价值和避坑点。
方案 1：document.domain + iframe
适用场景：小型项目、简单数据传递（如登录状态同步）。
原理：将两个子域的 document.domain 统一设置为主域（如 example.com），突破同源限制，实现 iframe 与父窗口双向通讯。
代码示例：
父窗口（parent.example.com）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>父窗口</title></head>
<body>
<iframe id="childIframe" src="http://child.example.com" frameborder="0"></iframe>
<script>
// 关键：将 domain 设为主域
document. = ;
.(, {
(e..() === -) ;
.(, e.);
});
