demo · v140

Event Router

The Controlled Frame event surface is bigger than <iframe> — it includes navigation, downloads, permissions, dialogs, console, network requests and zoom. This router shows every event the API exposes, lets you simulate one, and shows how a host page wires interception.

events the API exposes

simulate a scenario

routed events

simulate a scenario above

const frame = document.querySelector("controlledframe");

frame.addEventListener("permissionrequest", e => {
  // Decide on behalf of the embedded site.
  if (e.permission === "geolocation") e.request.allow();
  else e.request.deny();
});

frame.addEventListener("dialog", e => {
  // Replace the native alert UI with our own.
  showCustomDialog(e.messageText).then(r => e.dialog.ok(r));
});

frame.addEventListener("download", e => logToAuditTrail(e.url, e.filename));

see also