检查动态添加的元素是否准备就绪 [英] Check if dynamically added element is ready

问题描述

我有一个按钮，当点击它时，它会开始动画并且点击它重新创建现有的iframe。这样做的想法是新的iframe带有需要的东西。
我想检查iframe是否准备就绪（未添加但真实的意思，是它中的元素加载？）并停止动画。

有什么想法？

  var frm = $（'＃allin'）; 
 frm.submit（function（ev）{
 $（'＃loading'）。show（）; //这里我显示加载动画
 $ .ajax（{
类型：frm.attr（'method'），
 url：frm.attr（'action'），
 data：frm.serialize（），
 success：function（data）{
 $（'＃framewrap'）。html（''）; 
 var nfr = document.createElement（'iframe'）; 
 $（nfr）.attr（'src'，'iframe .php'）; 
 $（nfr）.attr（'id'，'frame'）; 
 $（nfr）.attr（'class'，'grid'）; 
 $ （'#framewrap'）。html（nfr）; 
 $（'＃frame'）。ready（function（）{
 $（'＃loading'）。fadeOut（）; // here I想要阻止它
}）; 
} 
}）; 
 
 ev.preventDefault（）; 
}）; 
  

解决方案

我把这段代码放到iframe中

  $（document）.ready（function（）{
 window.parent.postMessage（'load complete'，'http：// jahsdjhasjkdasdjkas.com'）; 
}）; 
  

并将其放入主页面

  window.addEventListener（'message'，receiveMessage，false）; 
函数loadshide（）{
 $（'＃loading'）。fadeOut（）; 
}; 
 
函数receiveMessage（evt）
 {
 if（evt.origin ==='ajhsdjashdjkasdas.com'）
 {
 loadhide（）; 
} 
} 
  

I'm trying to find a way for checking if a dynamically added HTML element is ready.

I have a button that when clicked, it starts to animate and on-click it recreates existing iframe. The idea to do that is new iframe comes with something needed in it. I want to check if the iframe ready (not added but real mean, is the elements in it loaded?) and stop the animation.

Have any idea?

var frm = $('#allin');
frm.submit(function (ev) {
    $('#loading').show(); //here I show the loading animate
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            $('#framewrap').html('');
            var nfr = document.createElement('iframe');
            $(nfr).attr('src','iframe.php');
            $(nfr).attr('id','frame');
            $(nfr).attr('class','grid');
            $('#framewrap').html(nfr);
            $('#frame').ready(function(){
            $('#loading').fadeOut(); //here I wanted to stop it
            });
        }
    });

    ev.preventDefault();
});

解决方案

I put this code into iframe

$(document).ready(function() {
window.parent.postMessage('load complete', 'http://jahsdjhasjkdasdjkas.com');
});

and this into main page

window.addEventListener('message', receiveMessage, false);
function loadinghide(){
$('#loading').fadeOut();
};

function receiveMessage(evt)
{
  if (evt.origin === 'ajhsdjashdjkasdas.com')
  {
    loadinghide();
  }
}

这篇关于检查动态添加的元素是否准备就绪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！