rainydio/f.html

## f.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      #lines {
        position: fixed;
        top: 0;
        left: 0;
        white-space: pre;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <div id="lines"></div>

    <script>
      let n = 0;
      let lines = [];
      window.addEventListener("message", evt => {
        if (evt.data.startsWith("dt=")) {
          n++;
          lines.unshift(`n=${n};${evt.data}`);
          lines = lines.slice(0, 25);
          document.getElementById("lines").innerHTML = lines.join("\n");
        }
      });

      const script = `
        let prev = Date.now();
        const fn = () => {
          const now = Date.now();
          const dt = now - prev;
          prev = now;
          requestAnimationFrame(fn);
          window.parent.postMessage("dt=" + dt, "*");
        };
        requestAnimationFrame(fn);
      `;

      const iframe = document.createElement("iframe");
      iframe.sandbox = "allow-scripts";
      iframe.style.marginTop = "1200px";
      iframe.srcdoc = "<script" + `>${script}<` + "/script>";
      document.body.appendChild(iframe);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style type="text/css">
	#lines {
	position: fixed;
	top: 0;
	left: 0;
	white-space: pre;
	font-family: monospace;
	}
	</style>
	</head>
	<body>
	<div id="lines"></div>

	<script>
	let n = 0;
	let lines = [];
	window.addEventListener("message", evt => {
	if (evt.data.startsWith("dt=")) {
	n++;
	lines.unshift(`n=${n};${evt.data}`);
	lines = lines.slice(0, 25);
	document.getElementById("lines").innerHTML = lines.join("\n");
	}
	});

	const script = `
	let prev = Date.now();
	const fn = () => {
	const now = Date.now();
	const dt = now - prev;
	prev = now;
	requestAnimationFrame(fn);
	window.parent.postMessage("dt=" + dt, "*");
	};
	requestAnimationFrame(fn);
	`;

	const iframe = document.createElement("iframe");
	iframe.sandbox = "allow-scripts";
	iframe.style.marginTop = "1200px";
	iframe.srcdoc = "<script" + `>${script}<` + "/script>";
	document.body.appendChild(iframe);
	</script>
	</body>
	</html>