Javascript 加载iframe时，Chrome将替换主窗口

我为希腊语语法树编写了一个简单的查看器：

在Chrome上，当我不在本地运行时，在加载iframe时会替换主窗口。见下文。如何修复此问题，使主窗口保留在所有浏览器上

主页有一个iframe，我在其中加载一个XML文件，该文件使用自己的CSS样式表进行格式化：

<iframe id="display" src=""></iframe>

主体隐藏滚动条，iframe不：

body {
    background-color: antiquewhite;
    overflow: hidden;
}

iframe {
    overflow: scroll;
    background-color: antiquewhite;
    width: 100%;
    height: 100em;
}

从元素体中删除属性overflow:hidden，并将overflow:hidden添加到元素html中

---

因此，浏览器中没有滚动条，但iFrame中会有滚动条。

以下是我学到的：当加载iFrame时，一些浏览器会滚动到父窗口的区域，为iFrame腾出空间，而有些则没有。如果在父窗口中启用滚动条，很容易看到这种情况。如果我禁用它，它看起来像是父窗口消失了，但它只是滚动过窗口的顶部，而没有提供一种返回到它的方式

我可以通过减小iframe的大小来解决这个问题。这给了我一个更简单的问题要解决：如何创建子窗口，以独立于设备的方式占用它下面的所有剩余空间

有人在这里给出了一个很好的答案：

所以现在它可以工作了，使用这个CSS：

html {
    overflow: hidden;
    background-color: antiquewhite;
}

html, body, iframe {height: 100%}

#top {
    height: 120px;
}

form {
    font-size: large;
    font-weight: bold;
    color: blue;
}

form input {
    background-color: white;
}

iframe {
    overflow: scroll;
    background-color: antiquewhite;
    width: 100%;
    height: calc(100% - 120px);
}

---

我认为问题来自于隐藏身体上的溢出。我尝试移动溢出：隐藏，但似乎无法解决问题。此更改现在位于与原始更改相同的位置。以下是当前css:body{background color:antiquewhite；overflow:hidden；}iframe{overflow:scroll；background color:antiquewhite；width:100%；height:100em；}Hmmm。。。如果我不禁用主滚动条，它将加载页面并滚动页面顶部区域。所以它看起来不像是整个窗口都被替换了，它只是滚动过去，因为滚动条被禁用了，现在有办法回到它。所以我真正需要的是一种确保顶部区域不能滚动过去的方法……正如我所悲伤的，html溢出是个问题。

html {overflow: hidden}
body {background-color: antiquewhite; margin: 8px;}

html {
    overflow: hidden;
    background-color: antiquewhite;
}

html, body, iframe {height: 100%}

#top {
    height: 120px;
}

form {
    font-size: large;
    font-weight: bold;
    color: blue;
}

form input {
    background-color: white;
}

iframe {
    overflow: scroll;
    background-color: antiquewhite;
    width: 100%;
    height: calc(100% - 120px);
}