加载 iframe 时 Chrome 会替换主窗口答案

【问题标题】：Chrome replaces main window when loading iframe加载 iframe 时 Chrome 会替换主窗口
【发布时间】：2017-06-21 13:48:31
【问题描述】：

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

http://ibiblio.org/bgreek/resources/syntax-trees/reader/

在 Chrome 上，当我不在本地运行它时，主窗口会在 iframe 加载时被替换。见下文。如何解决此问题，以便主窗口保留在所有浏览器上？

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

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

当点击按钮时，代码会将文件加载到这个 iframe 中：

function loadPassage() {
    var passage = document.getElementById("passage").value;

    document.getElementById("display").src = treeFile(passage, "nestle1904");
}

body 隐藏了滚动条，iframe 没有：

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

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

【问题讨论】：

我认为问题出在隐藏身体上的溢出。

标签： javascript iframe

【解决方案1】：

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

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

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

【讨论】：

我尝试移动overflow:hidden，但似乎没有解决问题。此更改现在与原始位置相同。这是当前的 css: body { background-color: antitypewhite;溢出：隐藏； } iframe { 溢出：滚动；背景颜色：古色古香；宽度：100%；高度：100em； }
嗯 ...如果我不禁用主滚动条，它会加载页面并滚动到页面的顶部区域。所以看起来整个窗口并没有被替换，它只是滚动过去，并且由于滚动条被禁用，现在可以返回到它。所以我真正需要的是一种方法来确保顶部区域不能滚动过去......
我很伤心，问题是 html 溢出。

【解决方案2】：

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

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

有人在这里提供了一个很好的答案：

How do I make an iframe fill the rest of the page?

所以它现在可以工作了，使用这个 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);
}

【讨论】：