Jak umieścić element iframe w aplikacji PhoneGap?

Question

Istnieje responsywna strona harmonogramu, która wyświetla widok mobilny podczas korzystania z telefonu. Chcę pokazać tę stronę w dziale PhoneGap div w ten sposób, aby zachować nagłówek i nawigację. Zwykły kod iframe nie działa dla mnie. Czy ktoś może dać mi wskazówkę, jak sprawić, żeby to działało jak na zrzucie ekranu poniżej.

Oto co obecnie mam:

<div id="set" title="Set Appointment" class="panel"> 
      <iframe width="320px" height="480px" src="http://google.com"></iframe> 
    </div> 

Answer 1

To działa:

<iframe src="http://www.myschedulingwebsite.com/" style="width:100%; height:100%;"> 

Ustawianie wysokości i szerokości do 100% wypełnia zawierające div.

UWAGA: W przypadku próby osadzić iframe za pomocą strony internetowej, które mogą być wyświetlane tylko w ramce na tego samego pochodzenia jak samej strony, inspektor internetowa wygeneruje błąd poniżej:

Odmowa wyświetlać "https://www.google.com/" w ramce, ponieważ ustawia "Opcje ramek X" na "SAMEORIGIN".

Po tym stwierdzeniu, www.google.com i osadzone elementy iframe innych witryn będą zawsze puste. Mam nadzieję, że to pomoże komuś.

Answer 2

Cóż można sprawdzić to kolejny question ponieważ można natknąć się na problemy podczas korzystania z elementów iframe w sieciach komórkowych poglądów urządzeń internetowych, jeśli chcesz tych dwa div jest cały czas na dole i górze, potrzebujesz tylko css do zrobienia tego:

.topheader { 
    position:fixed; 
    bottom:0; 
} 

i tak dalej .. mam nadzieję, że robi to hel p ty, oczywiście trzeba dokonać praw pozycji div

Answer 3

Miałem ten sam problem i zrobiłem to z moim własnym rozwiązaniem użyłem smartzoom. Iframe nie może być podana w 100% szerokości i wysokości, musisz podać w pikselach, więc użyłem smartzoom automatycznie dopasuje iframe do wysokości i szerokości kontenera. Można dostosować kod w zależności od potrzeb, heres jsfiddle

<div id="viewsites" class="viewsites"> 
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe> 
</div> 

Answer 4

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> 
    Your browser doesn't support iframes 
</iframe>