2013-07-03 13 views
8

Telefondayken cep telefonu görüntüsünü veren duyarlı bir zamanlama web sitesi var. Bu web sayfasını PhoneGap divumda göstermek istiyorum, böylece üstbilgimi ve gezinmeyi koruyabilirim. Düzenli iframe kodu benim için çalışmıyor gibi görünüyor. Birisi bana aşağıdaki ekran görüntüsünde nasıl çalışacağına dair ipucu verebilir. cep cihazlar web görünümleri üzerine iframe kullanırken bazı sorunlar rastlamak çünkü bu istersenizPhoneGap uygulamasında iframe'i nasıl yerleştirebilirim?

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

enter image description here

cevap

16

yapmak gerekir:

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

içeren div doldurur% 100'e yükseklik ve genişlik ayarlama.

NOT: Yalnızca sayfayla aynı kökenli bir çerçeve görüntülenebilir bir web sitesini kullanarak bir iframe gömmek için çalışırsanız, web denetleyicisi aşağıdaki hatayı atacağım:

Reddedildi 'X-Frame-Options' öğesini 'SAMEORIGIN' olarak ayarladığından 'https://www.google.com/' öğesini görüntülemek için.

Bununla birlikte, www.google.com ve diğer bazı sitelerin katıştırılmış iframe'leri her zaman boş olacaktır. Umarım bu birisine yardım eder.

0

Iyi, bu başka question kontrol edebilirsiniz: İşte

i anda ne var botton ve üstüne her zaman olduğu iki div, sadece bunun için css gerekir:

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

ve benzeri .. ben hel yapar umut p sen, elbette bu işleri div pozisyonları haklarını

+0

Ama PhoneGap uygulaması? –

0

Aynı problem vardı ve kendi çözümüm ile yapmıştım. smartzoom'u kullandım. Iframe% 100 genişlik ve yükseklik verilemiyorsa piksel olarak vermeliyim, bu yüzden smartzoom'u kullandım, iframe'i otomatik olarak konteyner yüksekliğine ve genişliğine sığdırır. Sen, ihtiyaca göre kod ayarlayabilirsiniz heres bu durumda, nasıl 'topheader' in 'menü' bağlantıları kullanıcı içindeki diğer sayfalara geri gezinmek için izin verecek jsfiddle

<div id="viewsites" class="viewsites"> 
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe> 
</div> 
3
<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> 
+0

Seçili yanıt benim için iyi sonuç vermedi çünkü iframe içeriği ortalanmış değildi, bunun yerine sayfaya çok alçak yerleştirilmiş ve sağa kaydırılmıştı. Bu stili kullandım (z-dizin kısmı hariç) ve ardından doğru şekilde görüntülendim. – Akronix

İlgili konular