DOMContentLoaded event triggers when iframe attached

I have a weird problem and i was wondering if this is the normal behaviour of this event. I have an "DOMContentLoaded" event. This event triggers as expected when the DOM is ready. But, if an iframe is attached to the DOM then the "DOMContentLoaded" event triggers again. My question is, is this the expected reaction?

            // log
            var msgEl = document.getElementById("content-msg");

            // dom ready
            var loadIfDomReady = function (event) {
              console.log('DOM fully loaded and parsed');
              msgEl.innerHTML += "<br/> DOM fully loaded and parsed";
              alert("DOM fully loaded and parsed");
            }
            window.document.addEventListener('DOMContentLoaded', loadIfDomReady(event), false);


            function createIframe() {
                  var _iframe = document.createElement("iframe");
              // shotgun approach
                  _iframe.style.visibility = "hidden";
                  _iframe.style.position = "absolute";
                  _iframe.style.display = "none";
                  _iframe.style.width = "0";
                  _iframe.style.height = "0";
                  return _iframe;
            }

            // vars
            var url = "https://codepen.io/alexandro218/pen/zYrpryK";

            function appendIframe() {    
              msgEl.innerHTML = "<br/>Append button clicked";
                if(!refreshIframe) {      
                  var refreshIframe = createIframe();
                  document.body.appendChild(refreshIframe);
                  refreshIframe.src = url;    
                  refreshIframe.onload = function (event) {
                     console.log("iframe is loaded");    
                     msgEl.innerHTML += "<br/>iframe is loaded";
                  };  
                  msgEl.innerHTML += "<br/>!iframe src appended";
                } else {
                  refreshIframe.src = url;   
                  msgEl.innerHTML += "<br/>iframe src appended";
                  console.log("iframe src appended");
                }  
            }

link to pen

Solution

The event is only ever triggered once for each page. You are alerting in the parent page. Then, when you add an iframe of that same page, you are alerting in the iframe page.

You can see a difference, for example, if you show the current page's location.href in the alert, and add something like ?i_am_an_iframe to the iframe URL:

https://codepen.io/blex41/pen/abdqdmo

But your situation does not actually need to use DOMContentLoaded to be reproduced:

// On page load
console.log('Hello from ' + window.location.href);

btn.addEventListener('click', function() {
  var _iframe = document.createElement("iframe");
  _iframe.src = "https://codepen.io/blex41/pen/XWXZXNL?i_am_an_frame";
  // Add the iframe, which will have the same script running inside it,
  // and hence produce another console.log, but with a different location.href
  document.body.appendChild(_iframe);
});

https://codepen.io/blex41/pen/XWXZXNL