Является ли jQuery.ready () допустимым при использовании в iframe.contentDocument? - PullRequest
Новая
       30

Является ли jQuery.ready () допустимым при использовании в iframe.contentDocument?

3 голосов
/ 03 мая 2011

Простой вопрос (как указано в заголовке): Действителен ли jQuery.ready() при использовании на iframe.contentDocument?

И сложный вопрос:

Мне нужно подключить событие keyup к полю ввода в CMS, поэтому я не имею никакого контроля над HTML, только сценарий.

Входные данные находятся внутри iframe, который вложен в другой iframe, поэтому в нем есть верхнее окно (окно браузера), iframe (давайте назовем его iframe1) и еще один iframe (давайте назовем этот iframe2). Сценарий и jQuery находятся в разделе <head> верхнего окна.

Я на самом деле не люблю setTimeout/setInterval, поэтому моей первоначальной мыслью было использовать jQuery.ready() вот так (я пропустил код, выбирающий фреймы): 

$(document).ready(function(){
  $(iframe1.contentDocument).ready(function(){
    $(iframe2.contentDocument).ready(function(){
      $("input").keyup(function(){ /* Do stuff */ });
    });
  });
});

Проблема в том, что к моменту запуска .ready() iframe1 я могу проверить iframe1.contentDocument.body.innerHTML, и он оказывается пустой строкой. Не то, что можно было бы ожидать. В результате этого код не может связать событие keyup.

В случае, если кто-то думает «Используете ли вы правильный контекст селектора?»: Да, я выбираю элементы iframe в правильных документах (хотя фрагмент кода выше может не полностью подтвердить это, так как я хотел сделать его простым ). Также нет проблем с политикой происхождения - все iframes и родительское окно находятся в одном домене.

Использование $(window).load(), кажется, работает, но ожидание загрузки изображений и т. Д. Требует слишком много времени ожидания, что будет неприемлемо для приложения.

Можно ли достичь jQuery.ready() функциональности, которая будет работать на фреймах без использования jQuery.load()?

Ответы [ 3 ]

1 голос
/ 03 мая 2011

Я не уверен, подразумевалось ли это в вашем отвращении к использованию $(window).load(), но вы можете привязать load() непосредственно к iframe и максимально приблизиться к нему, не имея прямого доступа к добавлению jquery содержимого iframe.

В прошлом я делал нечто подобное для динамического изменения размера iframe в зависимости от высоты его содержимого. Вот пример, который может не иметь прямого отношения, но вы должны быть в состоянии понять суть того, что он делает. 

    $(function(){
    var $content_iframe = $('#content_iframe')

    $content_iframe.load(
        function(){
            var contentHeight = $content_iframe.contents().find('html body').height();
            if (contentHeight > 1070){
                $(this).height(contentHeight + 30);
            }
            else{
                $(this).height(1100);
            }
        }
    );
})

Это может иметь те же недостатки, что и время загрузки изображения и т. Д. Удачи!

1 голос
/ 21 августа 2012

Только что заметил, что я никогда не принимал ответ на этот вопрос.

Краткий ответ: Нет.

Длинный ответ:

Значение jQuery.isReady устанавливается в значение true, когда jQuery думаетDOM готов и запускает обработчики событий, связанные с готовым событием.Он проверяет (среди прочего), определен ли document.body с повторяющимся setTimeout(), пока он не будет определен, но только для окна, в котором определен jQuery.Другими словами, он не работает для (i) Frames.

Готовый код из текущей версии jQuery (1.8.0): 

// Handle when the DOM is ready
ready: function( wait ) {

    // Abort if there are pending holds or we're already ready
    if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
        return;
    }

    // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
    if ( !document.body ) {
        return setTimeout( jQuery.ready, 1 );
    }

    // Remember that the DOM is ready
    jQuery.isReady = true;

    // If a normal DOM Ready event fired, decrement, and wait if need be
    if ( wait !== true && --jQuery.readyWait > 0 ) {
        return;
    }

    // If there are functions bound, to execute
    readyList.resolveWith( document, [ jQuery ] );

    // Trigger any bound ready events
    if ( jQuery.fn.trigger ) {
        jQuery( document ).trigger("ready").off("ready");
    }
},
0 голосов
/ 03 мая 2011

Если у вас есть контроль над страницами, загруженными в поля <iframe>, они тоже могут загружать свои собственные копии jQuery и иметь свои собственные обработчики ".ready ()".Эти обработчики могут, в свою очередь, обмениваться данными с кодом JavaScript «верхней» страницы (возможно, через объект «Отложенный» jQuery), так что ваша внешняя страница может быть настроена для запуска кода, когда все iframe станут «готовыми».1002 *

Вы бы хотели установить код родительской страницы до состояния «готово», потому что вы точно не знаете, что родительская страница будет готова до дочерней <iframe>стр.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...