javascript - React - 如何使嵌入式多步谷歌表单（iframe）仅在单击“下一步”或“提交”按钮时滚动到顶部

Question

我有一个联系页面，其中嵌入了一个多步骤的谷歌表单（作为 iframe）。表单的第一页/步骤很长，因此当单击“下一步”按钮时，我需要视口自动滚动回联系表单的顶部，但我不希望在用户访问联系页面本身时执行此操作。我目前的代码如下：

import React from "react";

const Form = () => {
  const scrollToTop = () => {
    if (window.myFrameChange !== undefined) {
      window.parent.document.getElementById("form").scrollIntoView();
    }
    window.myFrameChange = true;
  };

  return (
    <iframe
      id="form"
      title="Enrollment Form"
      src="..."
      width="100%"
      height="1250"
      frameBorder="0"
      marginHeight="0"
      marginWidth="0"
      onLoad={scrollToTop}
    >
      Loading…
    </iframe>
  );
};

export default Form;

这在初始页面加载时按预期工作（不会跳转到表单）。但是，如果用户访问联系页面，然后离开然后重新访问该页面，则视口将跳转到联系表单。

是否可以通过使用 useEffect 挂钩在页面加载时在父窗口上设置 onload 处理程序来解决此问题，然后在 iframe 上设置 onload 处理程序？还是有更好的方法？

如果是这样，有人可以用正确的语法帮助我（或者如果我在错误的树上吠叫任何其他建议）！

谢谢

标签： javascriptreactjsiframegoogle-forms