Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Recursive IFrame Fullscreen API success reporter</title>
<body>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="../../trusted-click.js"></script>
<script>
let child_frame = null;
const events = [];
document.onfullscreenchange = () => {
events.push("fullscreenchange");
};
document.onfullscreenerror = () => {
events.push("fullscreenerror");
};
function send_report() {
window.top.postMessage(
{
name: window.name,
action: "report",
report: {
api: "fullscreen",
frame: window.name,
fullscreenElementIsNull: document.fullscreenElement === null,
events,
},
},
"*"
);
}
async function create_child_frame({ src, name, allow_fullscreen }) {
child_frame = document.createElement("iframe");
child_frame.allow = allow_fullscreen ? "fullscreen" : "";
child_frame.name = name;
child_frame.style.width = "100%";
child_frame.style.height = "100%";
document.body.appendChild(child_frame);
await new Promise((resolve) => {
child_frame.addEventListener("load", resolve, { once: true });
child_frame.src = src;
});
window.top.postMessage({ action: "load", name }, "*");
}
async function go_fullscreen() {
await trusted_click(document.body);
let error;
try {
await document.body.requestFullscreen();
} catch (err) {
error = err.name;
} finally {
window.top.postMessage(
{ action: "requestFullscreen", name: window.name, error },
"*"
);
}
}
window.addEventListener("message", async (e) => {
// Massage is not for us, try to pass it on...
if (e.data.name !== window.name) {
child_frame?.contentWindow.postMessage(e.data, "*");
return;
}
switch (e.data.action) {
case "requestReport":
send_report();
break;
case "requestFullscreen":
await go_fullscreen();
break;
case "addIframe":
await create_child_frame(e.data.iframe);
break;
default:
window.top.postMessage(e.data, "*");
}
});
</script>
</body>