Question

我有一个iPhone应用程序和一个iPad应用程序，它们都在UIWebView中运行相同的Web代码。 Web代码是对PHP页面的调用，以便将一些HTML + Javascript移动到移动设备并将其显示在框架内。此代码的目的是与聊天服务器进行交互。

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>

Answer 1

尝试使主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">

Answer 2

对于初学者来说，这不是使用DOM树操纵页面HTML的理想方式，而.createelement对您来说会更容易。至于溢出，据我所知，如果你在两个设备上运行相同的iOS版本，他们将运行相同版本的Web工具包，所以尝试增加div大小并检查overflow属性以确保div边界不是隐藏内容。这很可能是屏幕分辨率或个性化问题（默认文本大小等），如果你正在分层div增加z-index属性，以确保你没有其他div坐在它上面。如果你在这里发布完整的CSS和HTML，可能更容易看一下更具体的内容。

祝你好运。

Answer 3

我会尝试这个中间步骤，看看是否没有直接用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);

Answer 4

仅仅为了记录，事实证明问题出在iPad应用程序及其实现滚动的方式（我没有代码，只有Web部分）。一旦所有者修复了应用程序，事情就会按预期开始工作。

无论如何，感谢所有回答我问题的人，非常感谢！

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

4 个答案: