iFrame ve Mobil Safari (iPad/iPhone)

Question

İşte sorunum var ve iframe web sayfasına İHTİYACINIZ. Bu iframe, her iki genişlik/yüksekliğe sahip olmalıdır. Bu, iOS'ta işe yaramaz çünkü güzel iOS, karelerin yükseklik özniteliğini yok saymaya karar verdi ve zorla her şeyi (jerks!) Göstermeye karar verdi.

Nasıl normal iframe gibi davranmaya başlıyorsunuz?

Answer 1

Bunu yapmak için bir yol buldum, ya da çerçevelenmiş sayfayı değiştirmeye erişiminiz varsa.

Web sayfasının iframe edilip edilmediğini denetlerseniz, iyi çalıştığını bulmamın bir yolu, tüm içeriğin (IFRAME DEĞİL) bir div ile doğrudan ifraed sayfasını İÇERİR. Etiketin hemen ardından etiketini yerleştireceksin. Daha sonra, Safari mobile için test edin ve iframe edilmişse test edin. bu kriterleri karşılamaması halinde

browser_=/iPhone|iPad/i.test(navigator.userAgent); 
isInIframe = (window.location != window.parent.location) ? true : false; 

, o zaman iframe'in yüksekliği olması ve otomatik div taşması ayarlamak GEREKEN ne çerçeveli sayfaya yerleştirilen div yüksekliğini ayarlayın. Bu, bir iframe olduğu yanılsamasını yaratacaktır. Bunun yerine pencerenin beri DIV kullanmak için geçiş emin olun böyle jQuery (pencere) ya da bir şey kullanılan elemanlar (varsa

Şimdi

, son ama en az

<div style="-webkit-overflow-scrolling:touch; overflow: auto;"> 

iframe etiketi sarmak iframe) otomatik olarak genişler çünkü iframe zaten genişlemiş olacaktır.

Answer 2

sert mücadele sonra nihayet ben şöyle ios.Do iframe kaydırma yapmak için bir yol buldu:

Sadece div bir iframe yerleştirin gibi stilleri uygulamak (konteyner gibi davranan elemanları gibi div) izler ve bu mükemmel çalışır.

.iframe { 
    overflow: scroll !important; 
    width: 100%; 
    height: 100%; 
    border: none; 
} 

.div { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    border: none; 
    background-color: #FFF; 
} 

GWT'de çalışıyorum, GWT kullanıcıları için burada öneri var. GWT durumunda, ScrollPanel'de (div) bir iframe yerleştirin ve stilleri yukarıdaki gibi uygulayın.

Answer 3

Önce Iframe için bu kodu kullandım, bu çalışma tüm web siteleri ve android mobileapp, iphone haricinde ipad için. Iphone düğmesi tıklatıldığında çalışmıyor ans css rahatsız olsun. hala çalışır ve genişliğini ayarlamak =% 100 2000 piksel onu strat ve indirgenmiş burada

<iframe class ="holds-the-iframe" src="http://stackoverflow.com" style="width:100%; height:100%;" seamless="seamless" ></iframe>

Sonra maksimum olan piksel olarak büyük yükseklik kullanılmaktadır. Bu tüm cihazlar için iştir.

<iframe src="http://stackoverflow.com" style="width:100%;height:1500px;"></iframe>