iPad에서 오버플로 div가 제대로 작동하지 않습니다.

아이폰 앱과 iPad 앱이 있습니다. 둘 다 동일한 웹 코드를 UIWebView에서 실행하고 있습니다. 웹 코드는 PHP 페이지를 호출하여 모바일에 HTML + 자바 스크립트를 가져 와서 프레임 안에 표시합니다. 이 코드의 목적은 채팅 서버와 상호 작용하는 것입니다.iPad에서 오버플로 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 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>

, 그것은 단순히 DIV에 추가 :

html로는 DIV를 포함 div는보기에 계속 스크롤됩니다.

는 아이폰과 아이 패드 모두 응용 프로그램은 아이폰에서 완벽하게 작동 아이폰 OS (5)

를 실행!

그러나 iPad에서는 20-25 줄 정도의 데이터가 더 이상 새로운 텍스트를 표시하지 않습니다. innerHTML의 값을 확인했으며 실제로 새 텍스트를 포함합니다. 단지 그것을 표시하는 것을 거부합니다. 이 경우 텍스트를 스크롤 할 수는 있지만 표시 할 새 텍스트를 추가 할 수는 없습니다.

iPad에서 스크롤 및 innerHTML 문제에 대한 여러 게시물을 읽었지만 제안 된 해결책이 도움이되지 않았습니다.

무엇이 잘못되었을 지에 대한 아이디어는 크게 감사하겠습니다.

들으

페르

UPDATE # 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

를, 그것은 문제가 아이 패드 응용 프로그램에 있었던 밝혀졌다 그리고 그것이 스크롤을 구현하는 방식 (나는 그 코드를 소유하지 않고 단지 웹 파트이다). 소유자가 앱을 수정하면 일이 예상대로 작동하기 시작했습니다.

어쨌든 내 질문에 답변 해 주신 모든 분들께 감사드립니다.

출처

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

처음에는 DOM 트리를 사용하여 페이지의 HTML을 조작하는 것이 이상적이지 않으며 .create 요소를 사용하는 것이 훨씬 쉽습니다. 오버 플로우에 관해서는 두 기기에서 동일한 iOS 버전을 실행하는 것으로 알고 있기 때문에 동일한 버전의 웹 킷을 실행할 것입니다. 따라서 div 크기를 늘리거나 오버 플로우 속성을 확인하여 div 경계가 맞는지 확인하십시오 숨어있는 콘텐츠. 이것은 화면 해상도 나 개인화 문제 (기본 텍스트 크기 등) 일 가능성이 높습니다. div를 레이어하는 경우 Z- 색인 속성을 높이면 다른 div를 맨 위에 놓지 않아도됩니다. 전체 CSS와 HTML을 여기에 게시하면 더 자세한 내용을 더 쉽게 볼 수 있습니다.

행운을 비네.

는

출처

2012-03-17 03:50:23 Eamonn

답해 주셔서 감사합니다. 이미 DOM 요소를 만들려고했으나 같은 문제는 수정하지 않았습니다. 또한 15 줄 이하의 텍스트가 있거나 (컨텐츠 영역을 완전히 채우지 않는 경우), 이후의 텍스트 삽입 작업이 정상적으로 작동하는 것으로 나타났습니다. 그러나 스크롤이 작동하지 않습니다 :(그래서 텍스트 또는 스크롤 중 ... 또 다른 흥미로운 점은 iPad에서 Safari를 사용하여 IFRAME 래퍼 내에서 동일한 코드를 실행하면 모든 것이 완벽하게 작동한다는 것입니다. 여기에 더 많은 코드를 게시 할 예정입니다. 감사합니다! – oferbar

내가 직접 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 및 크롬, 테스트 및 createDocumentFramgement() 지원되지 않습니다, 그래서 수 있습니다. – oferbar

IE6 이후 document.createDocumentFragment가 지원되었습니다. 실제로 작동하지 않는 경우라면 누군가가 바보 같은 일을하지 않았는지 확인하고 싶을 수 있습니다 (예 : 글로벌). 전역 (창) 컨텍스트에서 '문서'라는 변수를 선언하는 것처럼 간단 할 수 있습니다. 즉, a'var '선언이 없거나 열려있는 var가없는 모든 함수 내부를 의미합니다. 문서 ent 속성은 다른 사람들의 JS를 사용하고 싶다면 장기간 심각한 문제를 일으킬 수 있습니다. –

iPad에서 오버플로 div가 제대로 작동하지 않습니다.

답변

관련 문제