Question

我正试图找到一种方法来检查动态添加的HTML元素是否准备就绪。

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

有什么想法吗？

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();
});

Answer 1

您可以在加载时使用iframe

document.getElementById('iframe').onload = function() {
    stopAnimation();
}

Answer 2

我将此代码放入iframe

$(".some_selector").click(function () {
    // Loop over the rows of the table and append the td tag
    $("table.your_class tr").append("<td>col1</td>");
});

，这进入主页

Article.findById(mongoose.Types.ObjectId(req.params.id)}, (err, article)...

Answer 3

检查是否检查iframe的内容是否已完全加载的最佳方法是使用load事件，就像@Gaafar提议的那样：

$("#iframe").on("load", function() {
   // code to execute after the content has loaded.
}

虽然您自己的answer建议了一个可行的选择，但它并不是最佳选择，因为除非父窗口和iframe的内容都由同一个域提供，否则您将被阻止到期到Same-Origin Policy。因此，此解决方案对于可能正在为外部iframe提供服务的其他用户没有任何价值。

因此，您的代码可以编辑，直到达到以下最佳形式：

var frm = $("#allin");
frm.submit(function(ev) {
  /* Show the loading. */
  $("#loading").show();

  /* Send an AJAX request. */
  $.ajax({
    type: frm.attr("method"),
    url: frm.attr("action"),
    data: frm.serialize(),
    success: function(data) {
      /* Create the iframe and set its properties. */
      var nfr = $("<iframe>", {
        "id": "frame",
        "class": "grid",
        "src": "iframe.php",
      });

      /* Set the 'load' event. */
      nfr.on("load", function () {
        /* Fade the loading out. */
        $("#loading").fadeOut();
      });

      /* Empty framewrap and the append the created iframe. */
      $("#framewrap").empty().append(nfr);
    }
  });

  /* Prevent the default behaviour. */
  ev.preventDefault();
});

为了简单起见，我创建了一个简单的代码段来帮助说明使用timeout代替XMLHttpRequest的观点：

<强>段：

/* ----- JavaScript ----- */
setTimeout(function () {
  /* Create the iframe and set its properties. */
  var nfr = $("<iframe>", {
    "id": "frame",
    "class": "grid",
    "src": "https://example.com",
  });

  /* Set the 'load' event. */
  nfr.on("load", function () {
    /* Fade the loading out. */
    $("#loading").fadeOut();
  });

  /* Empty framewrap and the append the created iframe. */
  $("#framewrap").empty().append(nfr);
}, 1000);

/* ----- CSS ----- */
#loading {
  position: absolute;
  top: 0;
  height: 300px;
  width: 500px;
  background: black;
}

#frame {
  position: absolute;
  top: 0;
  height: 300px;
  width: 500px;
}

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "framewrap"></div>
<div id = "loading"></div>

正如您在自己的评论中提到的那样，“已经有一个名称相同的iframe ......”，已存在同名的iframe，这就是为什么{ {1}}不适合你。

我不确定你的意思是什么，因为你说load已经存在，但你在你添加到问题中的代码中创建了（再次？），但是下面的代码片段证明即使iframe事件监听器附加iframe之前可能存在load，只需更改src属性即可让它工作：

<强>段：

/* ----- JavaScript ----- */
setTimeout(function () {
  /* Cache the iframe. */
  var nfr = $("#frame");
  
  /* Res-set the 'src' attribute. */
  nfr[0].src = nfr[0].src;
  
  /* Set the 'load' event. */
  $("#frame").on("load", function () {
    /* Fade the loading out. */
    $("#loading").fadeOut();
  });
}, 1000);

/* ----- CSS ----- */
#loading {
  position: absolute;
  top: 0;
  height: 300px;
  width: 500px;
  background: black;
}

#frame {
  position: absolute;
  top: 0;
  height: 300px;
  width: 500px;
}

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "framewrap">
  <iframe id = "frame" class = "grid" src = "https://example.com"></iframe>
</div>
<div id = "loading"></div>

检查动态添加的元素是否准备就绪

3 个答案: