Check if iframe is completely loaded

Question

How do I check if my iframe is completely loaded? Such that once it is completely loaded and played, I will then perform the further operations. So how do I do this?

    <iframe id="iframe" style="
                    position: fixed;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    z-index: 10;
                    display: none;
                  ">
    </iframe>

    <script>
    let iframe = document.getElementById("iframe");
    iframe.src = "https://www.bing.com/";
    iframe.style.display = 'Block';

    //if iframe has been loaded completely then perform below operations

    //using while loop?
    { 
       alert("iframe loaded");
    }

    </script>

Answer 1

You just need a load event listener as shown below:

    <iframe id="iframe" style="
                    position: fixed;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    z-index: 10;
                    display: none;
                  ">
    </iframe>

    <script>
    let iframe = document.getElementById("iframe");
    iframe.src = "https://www.bing.com/";
    iframe.style.display = 'Block';

    //if iframe has been loaded completely then perform below operations

    function postLoadActions()
    { 
       alert("iframe loaded");
    }
    iframe.addEventListener("load",postLoadActions);

    </script>