如何确定嵌入多域名iframe中页面的父窗口所属域名？

针对你遇到的document.referrer无法准确获取父窗口域名的问题，我整理了不同场景下的解决方案：

1. 同域嵌入场景（父窗口与iframe域名一致） #

如果父页面和你的iframe页面属于同一域名（包括已配置跨域策略的子域），可以直接访问父窗口的location信息，这是最准确的方式：

try {
  const parentDomain = window.parent.location.hostname;
  console.log("嵌入我的域名是：", parentDomain);
} catch (error) {
  // 捕获跨域安全错误
  console.error("无法获取父域名：", error);
}

这种方法完全不受页面跳转影响，能直接拿到父窗口的真实域名。

2. 跨域嵌入场景（父窗口与iframe域名不同） #

浏览器的同源策略会阻止直接访问window.parent.location，这时可以尝试以下替代方案：

方法A：优化利用document.referrer #

虽然你提到document.referrer不满足需求，但在父页面直接嵌入iframe且无跳转的场景下，它的值就是父页面的URL。如果你的业务场景中这类情况占多数，可以结合判断使用：

const referrer = document.referrer;
if (referrer) {
  const url = new URL(referrer);
  const parentDomain = url.hostname;
  console.log("可能的嵌入域名：", parentDomain);
} else {
  console.log("无法通过referrer获取域名");
}

注意：如果用户是从其他页面跳转至父页面后再加载iframe，这个值会是跳转前的页面URL，需要结合业务场景评估可用性。

方法B：尝试window.postMessage（依赖父站点配合） #

虽然你无法控制父站点，但可以在iframe中主动发送请求消息，等待父站点响应。如果部分嵌入方愿意配合交互，就能拿到域名：

// 向父窗口发送域名请求
window.parent.postMessage({ type: "REQUEST_PARENT_DOMAIN" }, "*");

// 监听父窗口的响应
window.addEventListener("message", (event) => {
  if (event.data.type === "RESPONSE_PARENT_DOMAIN") {
    const parentDomain = event.data.domain;
    console.log("嵌入我的域名是：", parentDomain);
  }
});

这个方案依赖嵌入方的主动配合，只能作为补充方案使用。

方法C：通过URL参数传递域名（主动沟通方案） #

如果你能和部分嵌入站点沟通，可以让他们在iframe的src中携带域名参数，比如：

<iframe src="https://your-site.com/page?embed-domain=example.com"></iframe>

之后你可以直接从URL参数中提取：

const urlParams = new URLSearchParams(window.location.search);
const parentDomain = urlParams.get("embed-domain");
if (parentDomain) {
  console.log("嵌入我的域名是：", parentDomain);
}

这是跨域场景下最可靠的方案，但需要嵌入方的配合。

总结 #

• 同域场景优先使用window.parent.location.hostname，准确性最高；
• 跨域场景没有完美的无依赖方案，可根据业务实际情况选择document.referrer、postMessage或URL参数方案；
• 浏览器的同源策略是安全限制，所有跨域方法都存在一定局限性。

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