靜態的iframe，使網頁unscrollable

看看：http://jsfiddle.net/BUNVM/1/靜態的iframe，使網頁unscrollable

<body> 
    This is a test page<br/> 
    (many more lines to make the page scrollable) 
    This is bottom of the test page<br/> 
    <iframe id="bot_frame" style="width:250px;height:240px;position:fixed;bottom:0px;right:0px;text-align:left;border:0;"></iframe> 
    <script type="text/javascript"> 
    var iframe_content = '<!DOCTYPE html><html><body style="background-color:#ddd">Frame content</body></html>'; 
    window.onload = function() { 
     var iframe = document.getElementById("bot_frame"); 
     iframe.contentWindow.document.open(); 
     iframe.contentWindow.document.write(iframe_content); 
     iframe.contentWindow.document.close(); 
    }; 
    </script> 
</body>

它在屏幕的右下角有一個靜態的iframe和內容由document.open添加到它（）和文件.write（）和document.close（）。

，任何東西都很好，當你打開剛纔輸出幀：http://jsfiddle.net/BUNVM/1/show/

但是儘量在最後一個「＃」訪問相同的輸出幀在Chrome：http://jsfiddle.net/BUNVM/1/show/#

現在試圖滾動頁面，頁面卡在底部，無法向上/向下滾動。即使拖動滾動條，按下鍵盤上的箭頭鍵也不起作用。但是，如果您將鼠標放在iframe上，然後使用鼠標滾輪/滑塊滾動，則滾動工作。

我只能在Ubuntu 12.04的Chrome v21.0.1180.89中進行測試。

請注意，上述情況僅在您使用散列'＃'重新加載頁面時發生（僅向已加載的頁面添加'＃'不會重新加載頁面）。

我想知道這個原因和一個可能的解決方案。

來源

2013-04-06 akkishore

在Chromium中可重現版本25.0.1364.160 Ubuntu 12.04 – akkishore 2013-04-06 10:06:40

註釋掉「iframe.contentWindow.document.close（）;」線解決了這個問題，但爲什麼要「close（）」導致這個問題呢？ – akkishore 2013-04-06 10:12:47

更多洞察：改變底部：iframe樣式的0px到頂部：100px，我們可以從底部向上滾動頁面到頂部100px，但不能超過上面的值。此外，滾動只能通過點擊拖動滾動條來實現。顯然，iframe document.close（）強制重新計算父頁面開始的位置。似乎是一個Chrome錯誤。 – akkishore 2013-04-06 10:32:00

這是一個已經被報道之前在瀏覽器的錯誤：https://code.google.com/p/chromium/issues/detail?id=102816

看來，如果你嘗試滾動而懸停在IFRAME將再次滾動工作。所以，我創建了一個小巧的黑客工具這將使即使它的醜陋它的工作：

var offset = document.body.scrollTop || 0; 
iframe.contentWindow.document.open(); 
iframe.contentWindow.document.write(iframe_content); 
iframe.contentWindow.document.close(); 

if(document.location.toString().match(/#(top)?$/)) { 
    // Force a scroll on the iframe to make scrolling work again 
    iframe.contentWindow.document.body.scrollTop = 0; 

    // Scroll back to the original scroll position as document.close will have scrolled to the bottom 
    document.body.scrollTop = offset; 
}

http://jsfiddle.net/Tsq7N/

http://jsfiddle.net/Tsq7N/show/#

基本上我假的IFRAME滾動這使得再次滾動可能的，後來我設置文檔的scrollTop返回到document.open/write/close發生之前的狀態。

來源

2013-05-02 12:18:20 gwk

我解決了它通過使用src =「javascript：function（）{return」「;}」在iframe中，而不是做一個打開，寫和關閉。 – akkishore 2013-05-02 14:12:00

靜態的iframe，使網頁unscrollable

回答

相關問題