等待嵌入的iframe加载

时间:2016-05-11 14:47:18

标签: javascript jquery html iframe

我有一个动态加载iframe的脚本标记。那个iframe有自己的脚本标签,可以在第一个iframe中加载另一个iframe。 (愚蠢我知道,但我无法控制插件)。

我需要做以下事情: - 等待动态创建第一个iframe - 等待iframe的脚本执行并加载嵌套的iframe - 获取嵌套iframe的主体高度

我试过在两个级别都没有运气的情况下监听DOM的变化。以下是第一个iframe而不是第二个iframe。必须有一个更简单的方法!

// init
  // --------------------------------

  // define mutation observer
  MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  // wait for document ready
  $(document).on('ready', iframeDimensionsFaq);


  // iframe dimensions function
  // --------------------------------

  function iframeDimensionsFaq() {

    // get iframe parent element
    var parent = document.getElementById('helpjuice_js_widget_content');

    // observe iframe parent for DOM changes
    observe(parent, function(firstIframe){

      firstIframe.addEventListener('load', function() {

        // observe second iframe
        observe(this, function(secondIframe){
          console.log(secondIframe);
        });

      });

    });

  };


  // observe element for new nodes
  // --------------------------------

  function observe(el, cb) {

    // create new mutation observer
    var observer = new MutationObserver(function(mutations, observer) {

      // check for added nodes
      if (!mutations[0].addedNodes) return;

      // loop added nodes & check for iframe
      var addedNodes = mutations[0].addedNodes;
      for (var i=0; i<addedNodes.length; i++) {
        if (addedNodes[i].nodeName.toLowerCase() === 'iframe') {
          cb(addedNodes[i]);
        }
      }

    });

    // observe parent for DOM changes
    observer.observe(el, {
      subtree: false,
      attributes: true,
      childList: true
    });

  };

0 个答案:

没有答案