我之前在处理跨域iframe的适配时，刚好碰到过Safari这个棘手的问题——开启“阻止跨网站跟踪”后，orientationchange期间的resize消息会被ITP（智能跟踪预防）机制拦截，因为这类带有尺寸数据的频繁postMessage容易被误判为指纹跟踪行为。下面是几个经过验证的解决方案，按优先级推荐：

1. 改用MessageChannel替代普通postMessage #

MessageChannel是HTML5提供的双向通信机制，它会在父窗口和iframe之间建立一个专属的通信端口，Safari的ITP对这种明确的、用户触发的双向通信限制要宽松得多，不会轻易拦截合法的UI事件消息。

父窗口代码示例 #

window.addEventListener("DOMContentLoaded", () => {
  const iframe = document.getElementById("game-frame");
  
  // 等iframe加载完成后建立通道
  iframe.addEventListener("load", () => {
    const channel = new MessageChannel();
    
    // 监听来自iframe的消息
    channel.port1.onmessage = (event) => {
      const payload = event.data;
      switch(payload.event) {
        case "loaded":
          console.log("Game initialized");
          break;
        case "CANVAS_RESIZE":
          iframe.style.height = `${payload.height}px`;
          break;
      }
    };
    
    // 将通道的一端发送给iframe，指定目标域名
    iframe.contentWindow.postMessage("init-channel", "https://konamigaming.online", [channel.port2]);
  });
});

iframe内部代码示例 #

let communicationPort;

// 监听父窗口的通道初始化请求
window.addEventListener("message", (event) => {
  if (event.data === "init-channel" && event.ports.length > 0) {
    communicationPort = event.ports[0];
    
    // 发送初始化完成消息
    communicationPort.postMessage({ event: "loaded" });
    
    // 对resize事件做防抖处理，避免频繁发送消息
    const debouncedSendResize = (() => {
      let timeoutId;
      return () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          const canvas = document.getElementById("webgl-canvas");
          communicationPort.postMessage({
            event: "CANVAS_RESIZE",
            height: canvas.clientHeight
          });
        }, 200);
      };
    })();
    
    // 绑定旋转和窗口 resize 事件
    window.addEventListener("resize", debouncedSendResize);
    window.addEventListener("orientationchange", debouncedSendResize);
  }
});

2. 优化postMessage的发送频率（兼容方案） #

如果暂时无法切换到MessageChannel，对resize事件做防抖处理可以大幅降低被Safari拦截的概率。核心是避免在设备旋转过程中频繁发送消息，等旋转动作稳定后再发送最终的尺寸数据。

iframe内部防抖优化示例 #

// 自定义防抖函数
function debounce(func, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// 发送resize消息的防抖版本
const sendResizeMessage = debounce(() => {
  const canvas = document.getElementById("webgl-canvas");
  window.parent.postMessage(
    JSON.stringify({ event: "CANVAS_RESIZE", height: canvas.clientHeight }),
    "https://your-portal-domain.com"
  );
}, 300);

// 绑定事件
window.addEventListener("resize", sendResizeMessage);
window.addEventListener("orientationchange", sendResizeMessage);

3. 尝试配置跨域隔离头（需第三方配合） #

如果第三方演示程序的服务器支持，可以配置Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin响应头，让父窗口和iframe处于同一个跨域隔离上下文。这种情况下，postMessage的限制会大幅减少，但需要第三方服务配合修改配置，可行性取决于对方的支持程度。

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