Google Sites嵌入iframe中jQuery滚动至顶部功能失效求助

问题分析 #

你当前的代码仅监听了iframe的load事件，这个事件只会在iframe首次加载完成时触发一次。而表单点击“下一步”是在iframe内部切换内容，不会触发父页面的load事件，所以滚动逻辑不会执行。同时跨域同源策略限制了父页面直接监听iframe内部的点击或页面切换事件，导致常规的事件监听方法失效。

可行解决方案 #

方案1：监听iframe高度变化（推荐） #

Google Forms切换步骤时，iframe的内容高度会发生变化，我们可以通过MutationObserver监听这个变化，触发滚动到顶部的动作：

<iframe id="form-iframe" src="https://docs.google.com/forms/d/e/1FAIpQLSfim7o0_k-eSpkBh3Qy5exgmsqhYQTTtcPWAz3D-Jy7LamvkA/viewform?embedded=true" width="100%" height="1600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

<!-- 若Google Sites未加载jQuery，需先引入 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
const iframe = document.getElementById('form-iframe');
let lastHeight = iframe.offsetHeight;

// 创建观察者实例，监听iframe高度属性变化
const heightObserver = new MutationObserver(() => {
  const currentHeight = iframe.offsetHeight;
  if (currentHeight !== lastHeight) {
    jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
    lastHeight = currentHeight;
  }
});

// 配置监听选项：仅监听height属性变化
heightObserver.observe(iframe, { attributes: true, attributeFilter: ['height'] });

// 首次加载完成时也执行一次滚动
iframe.addEventListener('load', () => {
  jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
});
</script>

方案2：定时检测iframe状态（备选） #

如果高度监听不生效，可以尝试定时检测（性能略差，但跨域环境下可行），每间隔一段时间触发滚动逻辑：

<iframe id="form-iframe" src="https://docs.google.com/forms/d/e/1FAIpQLSfim7o0_k-eSpkBh3Qy5exgmsqhYQTTtcPWAz3D-Jy7LamvkA/viewform?embedded=true" width="100%" height="1600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 每500毫秒检测一次，若表单切换则滚动到顶部
setInterval(() => {
  jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
}, 500);

// 首次加载完成滚动
document.getElementById('form-iframe').addEventListener('load', () => {
  jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
});
</script>

注意事项 #

• 确保Google Sites中已加载jQuery，若未加载需手动引入上述代码中的jQuery CDN链接。
• 跨域限制下无法直接获取iframe内部的DOM事件，只能通过间接的属性变化或定时检测实现需求。

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