multiple iframes - how to handle onload

Question

<p>
    <iframe src="https://drive.google.com/file/d/1LFWCylxnx97ibukAYZK_K61R320/view?usp=sharing" width="100%" height="500"></iframe>
    <iframe src="https://drive.google.com/file/d/1Ow80e3exThQiPX11xjIMdlP/view?usp=sharing" width="560" height="315" ></iframe>
    <iframe src="https://drive.google.com/file/d/dPX11xjISYhsdfdKY/view?usp=sharing" width="560" height="315" ></iframe>
</p>

<script type="text/javascript">
    var i, frames, frame;
    frames = document.querySelectorAll("iframe");
    console.log("frames: "+frames.length )

    for (i = 0; i < frames.length; ++i)
    {
        frame = frames[i];
        console.log("iframe outside onload " +frame.src)

        frame.onload = function(){
            console.log("in the onload!!!"+ frame.src)
        }
    }

</script>

Trying to get a handle of all the iframes using onload. But the onload function seems to only consider the last of the iframes in the DOM. Any clues on how to get a handle of all the iframes?

Answer 1

Found the answer:

frame.onload = (function() {
  console.log("iframe content loaded >>"+frame.src);
})();

Reference: https://www.delftstack.com/howto/javascript/iframe-onload/