perbedaan pemilih iframe fancyBox2 dari induknya

Saya mencoba menerapkan fancyBox2 pada elemen di dalam iframe dari induknya. Oleh karena itu saya ingin menggunakan pemilih berikut:

$('a.lightbox', $('#modal iframe').contents()).fancybox();

Tapi pemilih ini tidak berfungsi. Berbeda dengan itu, pemilih berikut berfungsi:

$('#modal iframe').contents().find('a.lightbox').fancybox();

Pemilih pertama bahkan bekerja dengan fungsi lain, misalnya:

$('a.lightbox', $('#modal iframe').contents()).addClass('hidden');

Mengapa demikian? Apa bedanya?


jquery fancybox-2
person RoyalKnight    schedule 20.03.2015    source sumber
comment
Menurut apa yang saya lihat, perbedaannya adalah Anda tidak memiliki file fancybox js di dalam halaman iframe sehingga tidak dapat mengikat pemilih itu ke sana.   -  person JFK    schedule 20.03.2015
comment
File js dari fancyBox2 disertakan dalam halaman iframe, jadi ini bukan masalahnya.   -  person RoyalKnight    schedule 20.03.2015

Jawaban (1)


arrow_upward
0
arrow_downward

Apa bedanya?

Ini :

$('a.lightbox', $('#modal iframe').contents());

... adalah jalan pintas (terkadang disebut sebagai singkatan) dari ini :

$('#modal iframe').contents().find('a.lightbox');

... yang berarti ketika Anda menjalankan (pintasan) pertama, yang kedua dipanggil.

Pintasan membantu mempercepat dan menyederhanakan pengkodean, tetapi dalam hal kinerja, selalu lebih baik menggunakan metode atau fungsi langsung.

Misalnya, jika Anda memiliki tiga elemen yang berbagi pemilih yang sama seperti:

<a class="fancybox">...</a>
<a class="fancybox">...</a>
<a class="fancybox">...</a>

ini akan menghasilkan hasil yang sama:

var counter1 = $("html").find(".fancybox").length;          // returns 3
var counter2 = $(".fancybox", $("html")).length;            // returns 3
var counter3 = $(".fancybox", $("html").contents()).length; // returns 3

Mengapa demikian? (atau mengapa itu berhasil atau tidak?)

Hal ini bergantung pada banyak faktor seperti di mana dan kapan (konteks) Anda memanipulasi DOM, namun saat bekerja dengan iframes Anda harus memastikan bahwa:

  • kontes iframe terisi penuh
  • Anda mengikat acara ketika DOM (di dalam iframe) sudah siap

Untuk konsistensi (dan kompatibilitas lintas-browser, saya berani mengatakannya) Saya akan menggunakan metode .load() untuk memverifikasi konten iframe dimuat sepenuhnya dan metode .each() untuk beralih melalui pemilih yang ingin saya manipulasi atau acara bind seperti :

$('#modal iframe').load(function () {
    // iframe is loaded, then
    var that = $(this); // the iframe element     
    that.contents().find('a.lightbox')
    .each(function () {
        $(this) // the lightbox selector
        // bind events or manipulate elements
        .addClass("whatever")
        .fancybox();
    });
});

Atau jika Anda lebih suka format pintasan :

$('#modal iframe').load(function () {
    // iframe is loaded, then
    var that = $(this); // the iframe element     
    $('a.lightbox', that.contents()) // shortcut format
    .each(function () {
        $(this) // the lightbox selector
        // bind events or manipulate elements
        .addClass("whatever")
        .fancybox();
    });
});

Mereka harus bekerja dengan baik di browser apa pun. DI SINI adalah DEMO menggunakan format pintasan.

person JFK    schedule 20.03.2015