Chrome的加載IFRAME

在更換主窗口中我寫了希臘語語法樹一個簡單的瀏覽器：Chrome的加載IFRAME

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

來源

2017-06-21 user430799

我認爲這個問題是來自隱藏在身體上溢出。 – evolutionxbox

下面是我所學到的：當加載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); 
}

來源

2017-06-21 18:55:04 user430799

取出attri弼overflow: hidden從元素body並添加overflow: hidden的元素html

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

，所以你不會有任何滾動條在瀏覽器中，但會出現在iFrame。

來源

2017-06-21 14:47:37 vaso123

我試着移動'overflow：hidden'，但它似乎沒有解決問題。此更改現在位於原始位置。這裏是目前的CSS： body { background-color：antiquewhite; 溢出：隱藏; } iframe {overflow：scroll; background-color：antiquewhite; 寬度：100％; 身高：100em; } – user430799

嗯......如果我不禁用主滾動條，它會加載頁面並滾動頁面的頂部區域。所以它看起來並不像整個窗口被替換，它只是滾動過去，而且由於滾動條被禁用，現在有辦法回到它。所以我真正需要的是確保頂部區域不能滾動過去的方法...... – user430799

因爲我很傷心，html溢出是問題所在。 – vaso123

Chrome的加載IFRAME

回答

相關問題