如何用原生JS实现跨域iframe内的视差滚动效果？

首先直接给你结论：在严格跨域且无法同时控制主文档和iframe内容的情况下，这个需求是没法实现的——核心原因就是浏览器的同源策略（Same-Origin Policy）在限制你，这也是你之前所有尝试失败的根源。

为什么你的尝试都失败了？ #

• 给顶层窗口加滚动监听器失败：跨域场景下，iframe内部的脚本完全无权访问父窗口的DOM、事件对象或任何状态信息，浏览器会直接抛出跨域权限错误，这个监听器根本注册不上。
• document.body.scrollTop始终返回0：你在iframe里获取的是它自身文档的滚动距离，但iframe的滚动容器并没有滚动（滚动的是父窗口），而且跨域下你也拿不到父窗口的滚动状态，所以这个值自然一直是0。
• getBoundingClientRect()的top始终为0：如果是在iframe里获取自身元素的位置，那这个值是相对于iframe自己的视口的，不是父窗口的。而跨域规则禁止iframe脚本获取自身在父窗口中的位置信息，所以你没法通过这个计算父窗口的滚动偏移量。

可行的解决方案（前提是你能控制主文档和iframe的内容） #

如果两个页面都是你可控的，那可以用浏览器原生的postMessage API来实现跨域通信，这是目前唯一可靠的方案。原理是让父窗口监听自身滚动事件，把滚动偏移量发送给iframe，再由iframe内部调整图片位置实现视差效果。

主文档代码修改：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* 给父窗口加足够高度让它能滚动 */
    body { height: 2000px; }
    iframe { position: fixed; top: 100px; left: 50px; }
  </style>
</head>
<body>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <p>blah</p>
  <iframe id="parallaxIframe" src="parallax.html" width="600" height="400"></iframe>

  <script>
    const iframe = document.getElementById('parallaxIframe');
    
    // 监听父窗口滚动，发送滚动偏移量给iframe
    window.addEventListener('scroll', () => {
      const scrollOffset = window.scrollY;
      // 生产环境请替换成iframe的具体域名，不要用*
      iframe.contentWindow.postMessage({ type: 'scroll', offset: scrollOffset }, '*');
    });
  </script>
</body>
</html>

parallax.html代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { margin: 0; overflow: hidden; }
    .parallax-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <img class="parallax-img" src="your-image.jpg" alt="Parallax background">

  <script>
    const img = document.querySelector('.parallax-img');
    // 视差系数，数值越大，图片滚动效果越明显
    const parallaxFactor = 0.5;

    // 监听来自父窗口的消息
    window.addEventListener('message', (event) => {
      // 生产环境务必验证消息来源，防止恶意数据
      // if (event.origin !== 'https://your-main-domain.com') return;

      if (event.data?.type === 'scroll') {
        // 根据父窗口的滚动偏移调整图片位置
        const imgOffset = -event.data.offset * parallaxFactor;
        img.style.transform = `translateY(${imgOffset}px)`;
      }
    });
  </script>
</body>
</html>

注意事项 #

• 生产环境中，postMessage的第二个参数一定要指定具体的目标域名（比如'https://your-iframe-domain.com'），绝对不要用*，避免安全风险。
• 如果你无法控制iframe的内容（比如它是第三方网站），那这个需求完全无法实现，因为你没法在iframe内部添加消息监听逻辑。

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