Question

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

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");
}

正文隐藏滚动条，iframe不会：

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

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

Answer 1

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

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

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

Answer 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);
}

加载iframe时，Chrome会替换主窗口

2 个答案: