ikitommi/iframe.html

## iframe.html
<html>
<body>
<h1>framed!</h1>
</body>
</html>

## index.html
<!-- inspired by https://javascript.info/onload-ondomcontentloaded -->
<html>
<body>

<script>
  // readyState: loading|interactive|complete
  console.log("initial readyState: " + document.readyState);

  // print state changes
  document.addEventListener("readystatechange", () => {
    console.log("readyState => ",document.readyState);
  });

  document.addEventListener("DOMContentLoaded", () => {
    console.log("DOMContentLoaded")
  });

  // page is fully loaded (images too)
  window.addEventListener("load", (event) => {
    console.log("Page loaded");
    console.log(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  });

  // user iniates leaving from page
  window.addEventListener("beforeunload", (event) => {
    console.log("User about to leave the page...")
    navigator.sendBeacon("https://echo.free.beeceptor.com", JSON.stringify({"phase": "beforeunload"}));
  });

  // user leaves the page (no XMLHttpRequest allowed, just sendBeacon)
  window.addEventListener("unload", function() {
    navigator.sendBeacon("https://echo.free.beeceptor.com", JSON.stringify({"phase": "unload"}));
    console.log("... user has left the page.");
  });

</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
<script>
  img.onload = () => console.log("img onload");
</script>
<hr>

<iframe src="iframe.html" onload="console.log('iframe onload')"></iframe>
<hr>

<a href="https://github.com/metosin/malli/">Malli</a>
<hr>

</body>
</html>
	<!-- inspired by https://javascript.info/onload-ondomcontentloaded -->
	<html>
	<body>

	<script>
	// readyState: loading\|interactive\|complete
	console.log("initial readyState: " + document.readyState);

	// print state changes
	document.addEventListener("readystatechange", () => {
	console.log("readyState => ",document.readyState);
	});

	document.addEventListener("DOMContentLoaded", () => {
	console.log("DOMContentLoaded")
	});

	// page is fully loaded (images too)
	window.addEventListener("load", (event) => {
	console.log("Page loaded");
	console.log(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
	});

	// user iniates leaving from page
	window.addEventListener("beforeunload", (event) => {
	console.log("User about to leave the page...")
	navigator.sendBeacon("https://echo.free.beeceptor.com", JSON.stringify({"phase": "beforeunload"}));
	});

	// user leaves the page (no XMLHttpRequest allowed, just sendBeacon)
	window.addEventListener("unload", function() {
	navigator.sendBeacon("https://echo.free.beeceptor.com", JSON.stringify({"phase": "unload"}));
	console.log("... user has left the page.");
	});

	</script>

	<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
	<script>
	img.onload = () => console.log("img onload");
	</script>
	<hr>

	<iframe src="iframe.html" onload="console.log('iframe onload')"></iframe>
	<hr>

	<a href="https://github.com/metosin/malli/">Malli</a>
	<hr>

	</body>
	</html>