iOS tarayıcı - JavaScript'i kullanarak css veya içeriği değiştirirken iFrame üst üste atlıyor

Question

Bu sorun sonsuza kadar sürüyor gibi görünüyor. Bazı belirli durumlarda, iOS tarayıcıları bu sinir bozucu hatayı ele alır.

sorunu: Eğer bir iFrame içerir ve programlı iFrame'ler içerik belgeyi değiştirdiğiniz bir web sayfası varsa

, iFrame Sayfanın en üstüne sıçrar. Ancak, bu yalnızca DOM manipulasyonundan önceki sayfa bir yükseklikten daha uzunsa, genellikle bu durumun görünümün iki katı uzunluğundan daha uzun olduğu görülür.

Bu sorun, DOM yapısını değiştirip değiştirmediğiniz veya stil özelliklerini değiştirdiğinizden bağımsız olarak görüntülenir.

Bu hata bu kez itibariyle son sürümü de dahil olmak üzere, iOS'da sadece mevcut olduğu (9,2)

Answer 1

Sorun açıklaması: Sorun iOS'taki tarayıcılar (o kadar krom içeren bu gibi görünen

the same rendering engine kullanır) iFrame'lerin yüksekliğini doğru olarak hesaplamaz, bu tarayıcıda yeniden boyamalar oluştuğunda atlama davranışına neden olur.

çözümleri:

Çözelti A: sürükleme olayları vb kaydırma bu yaklaşımla sorunlar görülebilir olsa iFrame stil sayfasına aşağıdaki kodu ekleme, çoğu durumda sorunu çözer.

html, body { 
    height: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 

Çözelti B: iFrame içeriği render edildiğinde , daha sonra javascript bir satır içi stil kullanarak iFrame elemana açık olarak bu değeri iFrame içeriği yüksekliğini hesaplamak gerekir. Bu değerin iFrame'de içerik değiştirildiği veya eklendiği için güncellenmesi gerekir, tekrarlamanın tekrarlanmasını önlemek için yüksekliğin her zaman doğru olduğundan emin olmalısınız.

Bu, üçüncü taraf eklentileri ve açık bir geri çağrı olmadan sayfayı değiştiren widget'lar ile uğraşırken zorluklarla karşılaşır. Şimdilik bunun için en iyi durum mutation observers kullanımıdır. Eğer doc.close(); kaldırmak için bu

var doc = document.getElementById(id).contentWindow.document; 
doc.open(); 
doc.write(data); 
doc.close(); 

deneyin gibi bazı kod kullanırsanız

Answer 2

O bana yardımcı oldu.