2013-12-13 1 views
2

다른 웹 사이트의 양식을 iFrame으로로드하는 앱을 개발하고 있습니다. iFrame은 표시되는 동안 너비와 높이가 100 %로 설정됩니다. 이 웹 사이트에는 JQTouch가 있습니다.키보드는 PhoneGap Build 3.1의 iOS 입력 필드를 iFrame/객체 및 JQTouch로 숨 깁니다.

iPhone의 iOS 7에서 입력 필드를 터치하면 키보드가 팝업되고 입력 필드를 덮습니다. 스크롤, 크기 조정 또는 스크롤하지 않고 입력 필드를 봅니다. 입력 한 다음 키보드를 닫으면 아무 일도 일어나지 않습니다.

나는 모든 것을 시도해 보았습니다. 메타 뷰포트 태그에서 height = device-height를 추가/제거하는 것은 아무 것도하지 않았습니다. 솔루션에 가장 근접한 것은 config.xml에 "KeyboardShrinksView = true"라는 환경 설정을 추가하는 것입니다. 이렇게하면 스크롤 할 수 있지만 (충분하지는 않음) 영구적으로 약 20px 정도 사이트를 푸시합니다.

지난 몇일 동안 해결책을 찾지 못한 채로이 작업을 해왔습니다. 이거 버그 야? JQTouch가 PhoneGap Build와 상호 작용하는 방식입니까?

업데이트 : 아직 수정은 없지만 테스트하려면 iframe에서 양식의 페이지를 가져 와서 window.location.href = "www.mywebsite.com"을 사용하여 설정하십시오. 키보드는 그 상황에서 작동합니다. 이것은 (아직) 나에게 유효한 해결책은 아니지만 그것이 작동하지 않는 이유에 대한 정보를 제공 할 수 있습니다.

업데이트 2 : iframe 또는 html 객체 대신 window.location.href를 사용하도록 응용 프로그램을 재구성하고 있습니다. 이것은 약간의 작은 문제를 만들어 내지 만 키보드가 작동하지 않는 것보다 낫습니다. 응답이있는 사람은 누구나 볼 수 있습니다.

+0

동일한 문제가 있습니다. 해결 방법을 찾았습니까? – Red2678

+0

몇 가지 해결 방법을 생각해 냈습니다. 답변으로 게시 해 드리겠습니다. –

답변

4

주요 편집 : 방금 InAppBrowser 플러그인이 키보드 버그 만 수정하지 않는다는 것을 알았습니다. 나는 좀 더 연구했고, this topic helped. 모든 메타 뷰포트 태그에 "height = device-height"를 추가해야했습니다. "width = device-width"는 모바일 Safari에서 사이트를 보는 데 필요한 모든 문제를 해결해야합니다. 그래서 확인하고 문제를 일으킬 수 있으므로, 구문 오류에 대해 다시 한 번 확인해야합니다, 또한 세미콜론이 거기에 던진 이들의

<meta name="viewport" content="initial-scale=1, minimum-scale=1, 
    maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/> 

하나 : 최종 결과는 이것이다.

그래도 해결되지 않으면 메타보기 포트 수정 대신 또는 추가로 시도 할 수있는 다른 해결책이 있습니다. 제가 링크 된 주제에 대한 몇 가지 코멘트와 CSS에 대한 몇 가지 변경 사항이 포함되어 있습니다. 이것에 대한 변경으로 인해 코드에서 아무 것도 고쳐 내지 못했지만 적어도 한 명은 도움이되었으므로 솔루션이 필요하면 체크 아웃 할 가치가 있습니다.

iframe 및 개체로이 수정 사항을 테스트했지만 작동하지 않음 - InAppBrowser가 여전히 필요합니다.

/주요 수정.

  1. Use the InAppBrowser plugin : 여기

    은 나를 위해 일한 몇 가지 해결 방법입니다. 이렇게하면 앱이 InAppBrowser 내의로드 된 페이지에서 loadstart/loadstop/loaderror 이벤트와 상호 작용할 수 있습니다. 이것이 제가 제안하는 해결책입니다. 그러나 iOS 7을 사용하면 상태 표시 줄을 수동으로 숨겨야합니다 (해결책은 here

  2. ) 또는 window.location.href = [웹 사이트 URL]을 사용하여 페이지를로드하십시오. 앱과의 상호 작용이나 앱으로 돌아가거나 외부 사이트에 연결하는 것에 대해 걱정할 필요가없는 경우 (이 둘 모두 필요합니다), 이것이 최선의 방법입니다. 매우 간단하지만 첫 번째 솔루션의 일부 기능이 부족합니다.

  3. 또는 JQTouch를 제거하십시오. 필자는이 작업을 수행 할 수 없었지만 PhoneGap을 사용하여 응용 프로그램을 제작할 때 많은 부분이 중복되었습니다.

+0

#win "height = device-height"나를 위해 해줬습니다! 나는 이것이 페이지 렌더링의 모든면에 어떤 영향을 미치는지 100 % 확신하지는 않지만 내가 찾고있는 것을 고쳤다. 덕분에 @ daniel-miller – Red2678

+0

@ Red2678 - 실제로 device = device-width를 추가 할 때까지 사파리에서 사이트를 여는 데 문제가있었습니다. 나는 그것을 필요로하는 다른 사람들을 위해 대답에 넣을 것이지만, 내가 추가 한 후에는 수정 될 것으로 보인다. –

관련 문제