iOS瀏覽器 - 當使用JavaScript更改CSS或內容時，iFrame跳轉到頂部

Question

這個問題似乎一直存在。在某些特定情況下，iOS瀏覽器會出現令人沮喪的錯誤。

問題：

如果你有一個網頁，其中包含一個iframe，你是編程方式修改I幀內容文檔，內嵌框架將跳轉到頁面頂部。但是，只有在DOM操作之前的頁面超過某個高度時纔會發生這種情況，通常這似乎是一個大於視口長度兩倍的長度。

無論您是修改DOM結構還是更改樣式屬性，都會出現此問題。

此錯誤只出現在iOS上，包括最新發布的這個時間（9.2）

Answer 1

問題描述：

的問題似乎是，在iOS的瀏覽器（包括鉻，因爲它使用the same rendering engine）沒有正確計算iFrames的高度，這導致瀏覽器重新繪製時發生跳躍行爲。

的解決方案：

解決方案A：添加以下代碼到iFrame的樣式表解決了大多數情況下的問題，但對滾動阻力等事件可能會出現這種方法的問題。

html, body { 
    height: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 

解決方案B： 當iFrame的內容呈現，您應該計算的iFrame內容的高度，然後設置值明確使用JavaScript中的內嵌樣式IFRAME元素上。此值需要隨着內容被修改或添加到iFrame中而更新，您必須確保高度總是正確的，以防止跳躍再次發生。

這提出了處理與第三方插件和小部件改變頁面沒有明顯的回調時的挑戰。現在處理這個問題的最好情況是使用mutation observers。

Answer 2

如果你使用一些代碼，這樣

var doc = document.getElementById(id).contentWindow.document; 
doc.open(); 
doc.write(data); 
doc.close(); 

嘗試刪除doc.close();它幫助我。