如何判断同源？跨源场景修改顶层窗口HTML报错的解决方案

这个问题很常见——当你的页面被嵌入到iframe中时，跨源情况下操作顶层窗口DOM会被浏览器的同源策略直接阻止。要实现你需要的条件判断，核心是安全地验证当前页面与顶层窗口是否同源，因为直接访问window.top.location在跨源时会抛出DOM异常，所以我们得用try-catch来包裹判断逻辑。

方案一：使用location.origin（现代浏览器推荐） #

现代浏览器都支持location.origin（包含协议、主机和端口，是判断同源的标准方式），我们可以写一个简单的判断函数：

function isSameOriginAsTop() {
  try {
    // 尝试对比当前页面和顶层窗口的origin
    return window.location.origin === window.top.location.origin;
  } catch (error) {
    // 抛出异常说明跨源，返回false
    return false;
  }
}

然后你就可以在代码里这样用：

if (isSameOriginAsTop()) {
  window.top.$("#idxzy").html(img_block);
} else {
  // 跨源时的备选逻辑，比如提示用户或跳过操作
  console.log("当前处于跨源环境，无法修改顶层窗口内容");
}

方案二：兼容旧浏览器（手动拼接origin） #

如果需要兼容不支持location.origin的旧浏览器（比如IE11及更早版本），可以手动拼接协议+主机+端口来判断：

// 辅助函数：获取指定窗口的origin
function getWindowOrigin(targetWindow) {
  const { protocol, host } = targetWindow.location;
  return `${protocol}//${host}`;
}

function isSameOriginAsTop() {
  try {
    return getWindowOrigin(window) === getWindowOrigin(window.top);
  } catch (error) {
    return false;
  }
}

为什么要用try-catch？ #

浏览器的同源策略会严格阻止跨源脚本访问其他窗口的location对象，直接访问window.top.location会抛出DOMException: Blocked a frame with origin...的错误，所以必须用try-catch捕获这个异常——能成功对比origin就是同源，抛出异常就说明是跨源。

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