iPad上的溢出div無法正常工作

我有一個iPhone應用程序和一個iPad應用程序，都在UIWebView中運行相同的Web代碼。網頁代碼是對PHP頁面的調用，以獲得一些HTML + Javascript到移動設備並將其顯示在框架中。此代碼的目的是與聊天服務器進行交互。iPad上的溢出div無法正常工作

的HTML包括DIV：

<div id="messageContainer" style="width: 768; height: 310; border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch"> 
</div>

當javascript代碼獲取一個行數據從服務器，它只是把它添加到div：

function addPost(data) { 
    var e = document.getElementById("messageContainer"); 
    var post; 
    if (typeof(data) == "object") 
    { 
     post = "<div dir='ltr'><span style='color: rgb(183,226,76)' >" + 
       data.displayName + "</span>&lrm;: " + 
       "<span >" + data.msg + "</span><BR/></div>"; 
    } else { 
     post = data + "<BR/>"; 
    } 

    e.innerHTML = post; 
    e.scrollTop = e.scrollHeight; 
}

所以在文本div滾動以保持在視圖中。

iPhone和iPad正在運行iOS 5

應用程序完美的作品在iPhone上！

但是，在iPad上，大約20-25行數據後，div不再顯示新文本。我檢查了innerHTML的值，它確實包含了新的文本。它只是拒絕顯示它。我可以在這種情況下滾動文本，但不能添加將顯示的新文本。

我已經閱讀了幾篇關於iPad上的滾動和innerHTML問題的文章，但沒有一個建議的解決方案有所幫助。

任何想法可能是錯誤的將不勝感激！

THX

奧弗

更新＃1：

的HTML體是：

<body style="margin: 0px; height: <?=$chatWindowHeight?>;"> 
<div id="messageContainer" style="width: <?=$chatWindowWidth?>; height: <?=$chatWindowHeight?>; border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch"> 
</div> 

<IFRAME name="chatwindow2" id="chatwindow2" FRAMEBORDER="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" src="ConnectToChat.php">Browser does not support iframes!</IFRAME> 
</body>

來源

2012-03-17 oferbar

只是爲了記錄在案，事實證明，這個問題是在iPad應用程序和它實現滾動的方式（我不擁有該代碼，只是Web部件）。一旦所有者修復了應用程序，事情就像預期的那樣開始工作。

無論如何，感謝所有回答我的問題的人，非常感謝！

來源

2012-03-20 10:32:01 oferbar

儘量使主DIV非固定的，例如高度和寬度：

<div id="messageContainer" style="width: 100%; height: 20%; border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">

來源

2012-03-17 02:22:22

嗨，不幸的是，這並沒有改變，同樣的行爲。謝謝！ – oferbar 2012-03-18 14:25:53

對於初學者來說，這不是使用DOM樹操作頁面的HTML的理想方式，而.createelement對您來說會更容易。至於溢流，據我所知，只要你在兩臺設備上運行相同的iOS版本，他們將運行相同版本的網絡工具包，所以請嘗試增加div大小並檢查overflow屬性以確保div邊界不是隱藏內容。這很可能是屏幕分辨率或個性化問題（默認文本大小等），如果您正在分層div，請增加z-index屬性以確保您沒有其他div位於其上。如果您在這裏發佈完整的CSS和HTML，可能會更容易查看更多細節。

祝你好運。

來源

2012-03-17 03:50:23 Eamonn

感謝您的回覆！我已經嘗試過創建DOM元素，但它沒有做出改變，同樣的問題。我還注意到，如果我有15行或更少的文本（不完全填充內容區域），則隨後的文本插入可以正常工作。然而，滾動不起作用:(所以它是文本或滾動...另一個有趣的事情是，如果我通過在iPad上使用Safari在IFRAME包裝器中運行相同的代碼，事情完美無缺。在代碼中嵌入代碼我會在這裏發佈更多的代碼謝謝！ – oferbar 2012-03-18 14:49:55

我會嘗試這個中間步驟，看看不打與innerHTML的直接流動的實際元素解決了這個問題：

var innerHolder = document.createElement('div'); 
//not sure why you needed dir='ltr' but I'll let you setAttribute that if it's important 

var post = "<span style='color: rgb(183,226,76)' >" + 
       data.displayName + "</span>&lrm;: " + 
       "<span >" + data.msg + "</span><BR/>" 

innerHolder.innerHTML = post; 

innerHolder = document.createDocumentFramgement().appendChild(innerHolder); 
//Now innerHTML has been handled on an object that isn't affecting flow yet. 

while (e.firstChild) { //empty e out 
    e.removeChild(element.firstChild); 
} 

e.appendChild(innerHolder);

來源

2012-03-17 04:30:41

嗨，感謝您的回覆，這根本不起作用，我也在IE9和Chrome上測試，並且不支持createDocumentFramgement（），所以我可以甚至在我的桌面上測試 – oferbar 2012-03-18 14:43:37

自IE6以來，document.createDocumentFragment一直受到支持，如果它真的不起作用，可能需要確保某人沒有做過像覆蓋全局（窗口）文檔屬性這樣的傻事。可以像在全局（窗口）上下文中聲明一個名爲'document'的變量一樣簡單。我的意思是在沒有'var'聲明的任何函數中，或者在沒有var的情況下打開。相信當我說任何nuking文件如果你想使用其他人的JS，那麼這個財產將長期導致你嚴重的問題。 – 2012-03-21 16:33:50

iPad上的溢出div無法正常工作

回答

相關問題