用于确定本地 iframe 是否已加载的圣杯

今天我实际上遇到了一个错误，我删除和重新插入 iframe 会破坏网站上的所见即所得编辑器。因此，我创建了一个小型jQuery插件的启动来检查iframe的准备情况。它还没有准备好生产，我还没有对其进行太多测试，但它应该提供分离和重新附加 iframe 的更好替代方案 - 如果需要，它确实使用轮询，但应该在 iframe 准备就绪时删除 setInterval。

它可以像这样使用：

$("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 - 在 chrome 中错误地显示"完成"。应该在之后调用 iready 函数，并且尝试输出文档的 readyState 证明跨域异常 - 同样，这还没有经过彻底测试，但适用于我需要的东西。

我遇到了类似的问题，因为我有一个 iframe，一旦完成加载就需要修改它的文档。

如果您知道或可以控制iFrame中加载的文档的内容，那么您可以简单地检查/添加一个可以检查是否存在的元素，以便更新iframe文档。至少那时您知道要使用的元素已加载到文档中。

就我而言，我调用了一个函数，该函数本身检查了我的已知元素是否存在，该元素在我需要更新的元素已经加载后总是会找到 - 如果没有找到，它通过 setTimeout(( 再次调用自己。

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