как проверить, существует ли fancybox на странице уже

Я пытаюсь проверить, был ли уже загружен fancybox. Если да, то я запускаю скрипт ajax для размещения содержимого внутри.

если нет, я открываю iframe fancybox, и он извлекает содержимое.

вот код:

if ($('div#fancybox-frame:empty').length >0) { 
    alert('it is empty');

$.fancybox({
   'width': '80%',
    'height': '80%',
    'autoScale': true,
    'transitionIn': 'fade',
    'transitionOut': 'fade',   
    'type': 'iframe', 
    'href': '/show_photo'
});
 }
 else{
    alert('it is full');   
    $.ajax({
        type: "GET",
        url: "/show_photo",
        success: function(data){
        cropping_arrived();
        }
    });
  }
});

Он всегда возвращает, что он заполнен, даже если я знаю, что нет fancybox open.

какие идеи?

5 ответов


Это должно работать без тестирования .length

if ($('div#fancybox-frame:empty'))

однако, :empty проверяет наличие текстовых узлов. Так что если вы div имеет разрыв строки, т. е.

<div id="#fancybox-frame">
</div>

он может подавиться. В этом случае поместите открывающий и закрывающий теги в одну строку.


Я заставил его работать с кодом ниже:

if(typeof $.fancybox == 'function') {
     fancy box loaded;
} else {
     fancy box not loaded;
}

это работает для меня

if ($('#fancy_content:empty').length > 0)
{
    alert('Fancybox Open');
}
else
{
    alert('Fancybox NOT Open');
}

Я строил приложение с помощью Fancybox, поэтому я публикую свои выводы по различным связанным темам, которые я нахожу, обсуждая проблемы, с которыми я столкнулся. Решение Амита Сидхпуры отлично подходит для проверки, присутствует ли сценарий Fancybox JS в dom или, другими словами, если $.плагин fancybox присутствует.

однако он не сообщает вам, был ли инициализирован Fancybox или нет. Для этого вы можете сделать следующее:

function fancyboxIsInit() {
    var fbInit = false;
    if( typeof $.each( $(document).data('events') !== 'undefined' ) {
        $.each( $(document).data('events').click, function(i, v) {
            if( v.namespace === 'fb-start' ) fbInit = true;
        });
    }
    return fbInit;
}

или следующий:

function fancyboxIsInit() {
    var fbInit = false;
    if (typeof $._data(document, 'events') !== 'undefined') {
        $.each($._data(document, 'events').click, function (i, v) {
            if (v.namespace === 'fb-start') fbInit = true;
        });
    }
    return fbInit;
}

в зависимости от того, какую версию jQuery вы используете.

JSFiddle:

зацените JsFiddle для справки.


в моем случае, чтобы закончить здесь, в этом потоке, у меня был скрипт, проверяющий, был ли обнаружен ввод пользователя через движение мыши или активность клавиатуры. Однако родительская страница не обнаруживала активности при нахождении внутри iframe fancybox.

чтобы настроить и компенсировать этот факт, я позволяю скрипту, работающему в фоновом режиме, знать, есть ли открытый iframe в DOM (поскольку я не использую iframes, кроме fancybox), используя следующий код:

if ($('body iframe').length > 0)
{
    console.log('Fancybox Open');
}
else
{
    console.log('Fancybox NOT Open');
}

вы можно также выбрать, чтобы содержимое iframe имело определенный идентификатор или класс, который вы измеряете, однако имейте в виду, что когда элемент HTML динамически инициируется, вы должны сначала нацелиться на существующий Родительский селектор, который присутствовал в DOM, чтобы найти ваш вновь созданный элемент.