Святой грааль для определения того, загружен ли локальный iframe

Ответ 1

Сегодня я на самом деле столкнулся с ошибкой, когда мое удаление и повторная установка iframes ломает редактор wysiwyg на веб-сайте. Поэтому я создал начало небольшого плагина jQuery для проверки готовности iframe. Он не готов к производству, и я его не тестировал, но он должен обеспечить лучшую альтернативу снятию и повторной установке iframe - он использует опрос, если это необходимо, но следует удалить setInterval, когда iframe готов.

Его можно использовать как:

$("iframe").iready(function() { ... });

https://jsfiddle.net/q0smjkh5/10/

<script>
  (function($, document, undefined) {
    $.fn["iready"] = function(callback) {
      var ifr = this.filter("iframe"),
          arg = arguments,
          src = this,
          clc = null, // collection
          lng = 50,   // length of time to wait between intervals
          ivl = -1,   // interval id
          chk = function(ifr) {
            try {
              var cnt = ifr.contents(),
                  doc = cnt[0],
                  src = ifr.attr("src"),
                  url = doc.URL;
              switch (doc.readyState) {
                case "complete":
                  if (!src || src === "about:blank") {
                    // we don't care about empty iframes
                    ifr.data("ready", "true");
                  } else if (!url || url === "about:blank") {
                    // empty document still needs loaded
                    ifr.data("ready", undefined);
                  } else {
                    // not an empty iframe and not an empty src
                    // should be loaded
                    ifr.data("ready", true);
                  }

                  break;
                case "interactive":
                  ifr.data("ready", "true");
                  break;
                case "loading":
                default:
                  // still loading
                  break;   
              }
            } catch (ignore) {
              // as far as we're concerned the iframe is ready
              // since we won't be able to access it cross domain
              ifr.data("ready", "true");
            }

            return ifr.data("ready") === "true";
          };

      if (ifr.length) {
        ifr.each(function() {
          if (!$(this).data("ready")) {
            // add to collection
            clc = (clc) ? clc.add($(this)) : $(this);
          }
        });
        if (clc) {
          ivl = setInterval(function() {
            var rd = true;
            clc.each(function() {
              if (!$(this).data("ready")) {
                if (!chk($(this))) {
                  rd = false;
                }
              }
            });

            if (rd) {
              clearInterval(ivl);
              clc = null;
              callback.apply(src, arg);
            }
          }, lng);
        } else {
          clc = null;
          callback.apply(src, arg);
        }
      } else {
        clc = null;
        callback.apply(this, arguments);
      }
      return this;
    };
  }(jQuery, document));
</script>

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

Ответ 2

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

IF, вы знаете или можете управлять содержимым загруженного документа в iFrame, тогда вы можете просто проверить/добавить элемент, который вы могли бы проверить наличие, чтобы затем обновить iframe документ. По крайней мере, вы знаете, что элементы, с которыми вы хотите работать, загружаются в документ.

В моем случае я вызвал функцию, которая сама проверила наличие моего известного элемента, который всегда будет найден после того, как элементы, которые мне нужно было обновить, уже были загружены - в случае, если он не был найден, он назвал себя снова через setTimeout().

function updateIframeContents() {
    if ($("#theIframe").contents().find('.SaveButton').length > 0) {
        // iframe DOM Manipulation
    } else {
        setTimeout(updateIframeContents, 250);
    }
}

updateIframeContents();