Iframe içeriğinin ne zaman yüklendiğini algılama (Çapraz tarayıcı)

91

Bir iframe ve içeriğinin ne zaman yüklendiğini, ancak pek şansım olmadığını tespit etmeye çalışıyorum. Uygulamam, üst penceredeki metin alanlarında bazı girdiler alıyor ve "canlı önizleme" sağlamak için iç çerçeveyi güncelliyor

İframe yükleme olayının ne zaman gerçekleştiğini algılamak için aşağıdaki kodla (YUI) başladım.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'önizleme bölmesi' iframe'in kimliğidir ve olay işleyiciyi eklemek için YUI kullanıyorum. Ancak, geri aramamdaki gövdeye erişmeye çalışmak (iframe yüklemesi üzerine) başarısız oluyor, sanırım iframe olay işleyicisi hazır olmadan önce yükleniyor. Bu kod, iframe yüklemesini, onu oluşturan php betiğini uyutarak geciktirirsem çalışır.

Temel olarak, tarayıcılarda iframe yüklendiğinde ve belgesinin ne zaman hazır olduğunu algılamak için doğru yaklaşımın ne olduğunu soruyorum.

javascript events cross-browser

— David Snabel-Caunt
kaynak

1

YUI ile başlamak kötü bir fikirdir (diğer JS kitaplıkları gibi). Neden? Çünkü o kütüphanenin ne yaptığını bilemezsiniz. Tam olarak "yüklemeyi" destekleyemiyorlarsa, bunu kendiniz net ve okunabilir bir javascript kullanarak yapmalısınız.

— Christian

2

Sık sık @Christian kütüphanesinin kaynak kodunu okuyabilirsiniz. Bunun genellikle, uygulamalarını kullanıp kullanmadığınıza bakılmaksızın, bunu kendiniz nasıl yapacağınız konusunda size harika ipuçları verdiğini görüyorum.

— AJP

@AJP Benim açımdan yanlış anladın. Emin olmadığınız bir şey yapıyorsanız, daha az koda sahip olmak daha iyidir, böylece hatalara daha az yer kalır.

— Christian

2

Ona nasıl baktığına bağlı. O sırada YUI'nin olay yönetiminin işe yaradığını biliyordum, bu yüzden kodun bu kısmı için endişelenmeme gerek yoktu. Ayrıca kendi addEvent işleyicimi nasıl yazacağımı da biliyordum, bu sorunla ilgili olarak YUI'den daha iyi çalıştığını değil.

— David Snabel-Caunt

1

@Nico Soru, YUI ile ilgilidir ve $, YUI'nin Dom sarmalayıcısının bir takma adıdır.

— David Snabel-Caunt

73

iframe'in ne zaman yüklendiğini ve belgesinin ne zaman hazır olduğunu algılamak için?

İframe'in size çerçevenin içindeki bir komut dosyasından kendisini anlatmasını sağlayabilmeniz idealdir. Örneğin, hazır olduğunu söylemek için doğrudan bir ana işlevi çağırabilir. Her şey, beklemediğiniz bir sırada gerçekleşebileceğinden, çapraz çerçeve kod çalıştırma konusunda her zaman dikkatli olunması gerekir. Diğer bir alternatif, 'var isready = true;' kendi kapsamında ve üst komut dosyasının 'contentWindow.isready' için koklamasını sağlayın (ve değilse onload işleyicisini ekleyin).

Herhangi bir nedenle iframe belgesinin birlikte çalışması pratik değilse, geleneksel yük yarışı sorununa sahipsiniz, yani öğeler yan yana olsa bile:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

Komut dosyası çalıştırıldığında öğenin önceden yüklenmemiş olacağının garantisi yoktur.

Yük yarışlarından çıkış yolları:

IE'de, önceden yüklenmiş bir şey olup olmadığını görmek için 'readyState' özelliğini kullanabilirsiniz;
Öğenin yalnızca JavaScript etkinken kullanılabilir olması kabul edilebilirse, kaynağı ayarlamadan ve sayfaya eklemeden önce 'onload' olay işlevini ayarlayarak bunu dinamik olarak oluşturabilirsiniz. Bu durumda, geri arama ayarlanmadan önce yüklenemez;
biçimlendirmeye dahil etmenin eski usul yolu:

<img onload="callback(this)" ... />

HTML'deki satır içi 'onsomething' işleyicileri neredeyse her zaman yanlıştır ve kaçınılması gerekir, ancak bu durumda bazen en az kötü seçenektir.

— Bobince
kaynak

Teşekkürler. Benim çözümüm readyState'i (varsa), ardından yüklenip yüklenmediğini görmek için gövde elemanlarının internalHTML uzunluğunu kontrol eder. Değilse, yükleme olayı işleyicisini bağlar. İyi çalışıyor gibi görünüyor

— David Snabel-Caunt

8

-1 - satır içi olaylar "kötü" değildir, bu sadece mevcut modadır. Aslında satır içi olayların, sihirli benzerlerinden farklı olarak (diğer yandan eklenmesi, yığılması ve sorunsuz bir şekilde kullanılması daha kolaydır) hata ayıklaması ve anlaşılması daha kolaydır.

— Hıristiyan

1

@Christian, çok uzun bir listenin her öğesine bir olay eklemeniz gerektiğinde, satır içi etkinlikler de en iyi seçenektir. Listeyi sunucu tarafında oluşturmak için zaten döngüde olduğunuz için, satır içi olayı da eklemek çok daha etkilidir.

— haknick

16

@haknick Listede tek bir olay dinleyicisi kullanmak ve bir olay temsilcisi kullanmak istemez miydiniz? Bu daha verimli olacaktır.

— David Snabel-Caunt

4

İframe alanlar arası ise bu işe yaramaz. İframe içindeki komut dosyası, üst pencereye erişemez.

— Sudheer Someshwara

48

Bu blog gönderisine bakın . JQuery kullanır, ancak kullanmıyor olsanız bile size yardımcı olacaktır.

Temelde bunu sizin document.ready()

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

— Kgiannakakis
kaynak

İlginç, ancak sahip olduğum sorun yük olayları ve zamanlamayla ilgili. O makalenin önerdiği yük olayını dinliyorum.

— David Snabel-Caunt

bunu ile denedim console.log. iframe yüklendikten sonra günlüğe kaydedilir.

— shorif2000

12

React kullananlar için, aynı kaynaklı iframe yükleme olayını tespit etmek onLoadiframe öğesinde olay dinleyicisini ayarlamak kadar basittir .

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

— Farzad YZ
kaynak

Can onLoadetkinlik, yalnızca aynı kaynak Iframe için tetikleyebilir?

— L_K

2

Ember kullanan herkes için bu beklendiği gibi çalışmalıdır:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />

— Max Wallace
kaynak