How can I check if the contents inside an iframe is fully loaded and the src url is not down(404/not available) using angular?

Question

I have an angular app which is having an iframe that loads a chat bot from an external url.I need to check if the url is fully loaded and the url is not down.

The iframe is initially not loaded on the dom and is only loaded after the user clicks on an icon.Since the iframe takes some time to load initially the iframe space will be empty.I tried showing a loader by setting it as background to the div that contains the iframe but the loader was always running even after the iframe is loaded.

Can somebody please guide me? Im new to angular.Im using agular 5.TIA

Answer 1

The simplest way to do this is to check onload events on iframe. ContentDocument of type Document, readonly, checks this frame contains, if there is any and it is available, or otherwise it will return null.

//Get reference of the iframe with reference variable and call
// onload event on it
iframe.onload = function(){
   var that = $(this)[0];
   try{
        that.contentDocument;
   }
   catch(err){
        //TODO 
   }
}