Is there an option on the IFrame element to load it before the dom page loaded event? I want the iframe to finish loading (the source is a local page) and when that is done then have the page DOMContentReady event dispatched. NOT BEFORE.
The IFrame Element has a loading attribute but it only has options for eager or lazy.
Is there a way to make sure the page in an iFrame element is loaded before the parent page DOMContentLoaded event? Currently, if you have an iframe with a page and on the parent page (the page that has the iframe) you add an event listener to window for DOMContentLoaded, the event is fired before the iframe content has loaded.
More info:
The reason is, I would like to use templates but templates are only supported inline. Why? Why do you only have templates for one page? I have a template I want to use across multiple pages (it is a Dialog Element). Templates don't help if they are limited to one page. So I would like to use an external HTML template(s). I've only found a way to make this work with iframes but the iframes is not loading before the page loads.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#loading
Or is there another event on window that waits until all the iframe content is loaded?
Testing:
With the following code the console logs go in this order:
dom content loaded
iframe load
page load
It seems that page load is the event I'm looking for. I have been using DomContentLoading. From MDN:
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images, except those that are loaded lazily. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.