Check if dynamically added element is ready

Question

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

Answer 1

The best way to check whether to check whether the content of an iframe has fully loaded is using the load event, just as @Gaafar proposes:

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

While your own answer suggests a viable alternative, it's not really the best option, because unless the content of both the parent window and the iframe are served by the same domain you will be blocked due to the Same-Origin Policy. So this solution has no value for other users that may be serving external iframes.

---

So, your code can be edited until it reaches the following optimal form:

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

---

I've created a simple snippet to help illustrate my point using a timeout instead of an XMLHttpRequest for simplicity:

Snippet:

/* ----- 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>

---

As you have mentioned in a comment of yours, "There already is an iframe with same name...", an iframe with the same name already exists and that's why load doesn't work for you.

I'm not sure exactly what you mean, because you say the iframe already exists, but you create it (again?) in the code you have added to your question, but the following snippet proves that even though the iframe may exist before the load event listener is attached by just changing the src attribute you can get it to work:

Snippet:

/* ----- 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>

Answer 2

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

Answer 3

you can use iframe on load

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