Отличия селектора iframe fancyBox2 от родителя

Я пытаюсь применить fancyBox2 к элементам внутри iframe от родителя. Поэтому я хочу использовать следующий селектор:

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

Но этот селектор не работает. В отличие от этого, работает следующий селектор:

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

Первый селектор работает даже с другими функциями, например:

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

Почему это так? Какая разница?


jquery fancybox-2
person RoyalKnight    schedule 20.03.2015    source источник
comment
Насколько я вижу, разница в том, что у вас нет файлов fancybox js внутри страницы iframe, поэтому вы не можете привязать к ней этот селектор.   -  person JFK    schedule 20.03.2015
comment
Файлы js из fancyBox2 включены в страницу iframe, так что проблема не в этом.   -  person RoyalKnight    schedule 20.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Какая разница?

Этот :

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

... является сокращением (иногда называемым сокращением) этого:

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

... это означает, что при выполнении первого (ярлыка) вызывается второй.

Ярлыки помогают ускорить и упростить кодирование, но с точки зрения производительности всегда лучше использовать прямые методы или функции.

Например, если у вас есть три элемента, использующих один и тот же селектор, например:

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

они дадут тот же результат:

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

Почему это так? (или почему это работает или не работает?)

Это зависит от многих факторов, таких как, где и когда (контекст) вы манипулируете DOM, но при работе с iframes вы должны убедиться, что:

  • конкурсы iframe полностью загружены
  • вы связываете события, когда DOM (внутри iframe) готов

Для согласованности (и, осмелюсь сказать, кросс-браузерной совместимости) я бы использовал метод .load() для проверки того, что содержимое iframe полностью загружено, и метод .each() для перебора селекторов, которыми я хочу манипулировать, или связать такие события, как:

$('#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();
    });
});

Или, если вы предпочитаете формат ярлыка:

$('#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();
    });
});

Они должны одинаково хорошо работать в любом браузере. ЗДЕСЬ ДЕМО с использованием формата ярлыка.

person JFK    schedule 20.03.2015