跨域场景下父页面加载第三方站点页面时获取子站点URL问题咨询

方案解答 #

首先明确：使用document.referrer无法实现你要的效果，当test.html以iframe形式嵌入prod.com页面时，document.referrer返回的是父页面prod.com的地址，并非你需要的子站点web1.com的地址。

最简可行方案（无需父页面配合） #

你要获取子站点自身的URL，不需要访问跨域的window.top对象，直接读取当前窗口的window.location属性即可，该属性不受跨域限制，始终返回当前iframe加载资源的真实地址：

// test.html 中直接写这段代码即可
console.log(window.location.href)

效果完全匹配你的需求：

• 直接访问web1.com的test.html时，输出http://www.web1.com对应的地址
• 嵌入prod.com的iframe中运行时，输出的依旧是http://www.web1.com对应的子站点地址

父页面主动获取子站点URL方案 #

如果是prod.com父页面需要主动拿到子iframe的地址，可通过postMessage跨域通信实现：

1. 子站点test.html中添加发送消息逻辑：

// 只向信任的prod域名发送消息，避免安全问题
window.top.postMessage(
  { web1Url: window.location.href },
  'http://www.prod.com'
)

2. prod.com父页面添加监听逻辑：

window.addEventListener('message', (event) => {
  // 校验消息来源，避免恶意消息
  if (event.origin === 'http://www.web1.com') {
    console.log('加载的web1站点地址为：', event.data.web1Url)
  }
})

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