求助：Squarespace站点中Adobe XD嵌入原型加载后页面跳转问题

我之前处理过类似的Adobe XD iframe自动滚动问题，大概率是XD原型的iframe内部加载时触发了聚焦或滚动行为，把页面拉到了它的位置。结合你的需求——不想把原型放顶部、希望页面加载后停在顶部、支持HTML/CSS/JS调整——这里有个亲测有效的方案：

方案：用Intersection Observer延迟加载原型到可视区域时 #

核心思路是：初始不加载原型的src，只在用户滚动到原型附近时再动态加载，这样既不破坏你的项目展示逻辑，又能避免加载时的自动跳转。

步骤1：修改iframe的HTML结构 #

把原来的src换成data-src（用来存储原型链接），同时加个容器和加载提示，让用户知道原型在加载中：

<center>
  <div class="xd-prototype-container" style="width:414px; height:736px; background:#f0f0f0; position:relative;">
    <iframe id="nautilab" width="414" height="736" data-src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen frameborder="0"></iframe>
    <div class="loading-label" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:sans-serif; color:#666;">加载原型中...</div>
  </div>
</center>

注意：我帮你修正了原代码里allowfullscreen"的多余双引号，避免HTML语法错误。

步骤2：添加JavaScript实现延迟加载 #

用Intersection Observer API（比监听scroll事件更高效）来检测原型是否进入视口，进入后再加载src：

document.addEventListener('DOMContentLoaded', function() {
  // 页面加载完成后强制停在顶部
  window.scrollTo(0, 0);

  const xdIframe = document.getElementById('nautilab');
  const loadingLabel = xdIframe.nextElementSibling;

  // 创建观察者：当元素进入视口时触发
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 加载原型链接
        xdIframe.src = xdIframe.dataset.src;
        // 加载完成后隐藏提示文字
        xdIframe.onload = () => loadingLabel.style.display = 'none';
        // 只加载一次，取消监听
        observer.unobserve(xdIframe);
      }
    });
  }, {
    rootMargin: '100px 0' // 提前100px开始加载，提升用户体验
  });

  observer.observe(xdIframe);
});

步骤3：在Squarespace中添加代码 #

把上面的HTML替换你原来的嵌入代码，然后把JavaScript放到Squarespace的页面代码块里（或者通过「设置」→「高级」→「代码注入」添加到页面底部）。

备选方案：加载后强制回到顶部（体验稍差） #

如果上面的方案因为某些原因不生效，你可以试试先加载原型，然后在加载完成后强制页面回到顶部，但可能会有轻微的滚动闪烁：

document.addEventListener('DOMContentLoaded', function() {
  window.scrollTo(0, 0);
  const xdIframe = document.getElementById('nautilab');
  
  // 延迟500ms加载，确保页面先稳定在顶部
  setTimeout(() => {
    xdIframe.src = 'https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982';
    xdIframe.onload = () => window.scrollTo(0, 0);
  }, 500);
});

这个方案的原理是等页面已经停在顶部后再加载原型，加载完成后再强制拉回顶部，虽然有闪烁，但能解决问题。

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