从具有与父域不同的域的 iFrame 将窗口滚动到 iframe 的顶部答案

【问题标题】：Scroll window to top of Iframe from iFrame with different domain than parent从具有与父域不同的域的 iFrame 将窗口滚动到 iframe 的顶部
【发布时间】：2017-11-12 14:25:44
【问题描述】：

上下文：

父页面加载包含应用程序/插件的 IFRAME
父页面具有与 IFRAME 不同的域
父页面和 IFRAME 都安装了iframeResizer 插件 -> iframe 没有滚动条（所有内容都显示在父页面上） - IFRAME 总是根据其文档高度调整大小
父页面 html/js 无法更改，只有 IFRAME

问题：

如果用户在 IFRAME 的底部并执行了一项操作，您如何在 IFRAME 的顶部滚动他？

不起作用的解决方案：

window.scrollTo(0,0); // from iframe
来自 iframe 的带有 window.parent 的任何内容（无法访问）
在 iframe 主体顶部使用锚点并重写 window.location

可行的解决方案？

将发布一个作为答案（它有效，但很奇怪......而且对 IE 不利）

【问题讨论】：

标签： javascript iframe

【解决方案1】：

您可以尝试使用document.body.scrollIntoView()。

它应该可以在 IE8+ 和其他浏览器上运行（我只在 Chrome、FF 和 IE11 中测试过）

见 codepen demo here。

document.body.scrollIntoView();

【讨论】：

谢谢！这似乎是正确的做法。不知道 scrollIntoView 方法。（我一直在寻找窗口方法，而不是元素）

【解决方案2】：

这在 Chrome 和 Mozilla 中运行良好（IE 无法运行，为什么？）...但这似乎不是正确的方法。

演示 Code pen demo

在 IFRAME 中创建 input 字段
设置 INPUT 样式以使其对用户不可见
通过聚焦 IFRAME 中的input 滚动父页面

// IFRAME JS // 初始化一个“滚动”对象 var scrollPage = (函数(){ var input = document.createElement("input"); input.style.position="绝对"; input.style.top="-50px"; document.body.insertBefore（输入，document.body.firstChild）；返回函数（）{ 输入.焦点（）； }; })(); // 需要时使用“滚动条” 滚动页面（）；

【讨论】：