v151 · Web APIs · Focus Demo

Focus Demo

Detects focus-without-user-activation policy support and demonstrates the difference between a focus call made with and without user activation — showing what gets blocked when the policy is applied.

This page uses real iframes with different allow attributes. The parent asks each frame to call focus() without user activation, and the frame reports whether the browser allowed it.

user activation state

UserActivation API supported—

navigator.userActivation.isActive—

navigator.userActivation.hasBeenActive—

document.featurePolicy: focus-without-user-activation—

Clicking "Check activation state" itself creates user activation — so isActive will be true. Check values immediately on page load using the code below to see the pre-activation state.

focus a target element

The frames below are identical except for their Permissions Policy. Ask each frame to focus its own input from a parent-triggered task and compare the actual browser result.

allowed iframe

denied iframe

Last focus attempt result—

document.activeElement—

code

// Check user activation state before calling focus()
// (mirrors what the browser enforces when focus-without-user-activation is denied)

const ua = navigator.userActivation;
if (!ua) {
  // UserActivation API not supported — cannot check
}

// isActive: true if a user gesture occurred recently (transient activation)
console.log('isActive:', ua.isActive);   // false at load time, true after click
console.log('hasBeenActive:', ua.hasBeenActive); // true after any ever

// When focus-without-user-activation policy denies the iframe:
// This focus() call at load time is silently ignored:
// Parent page:
iframe.allow = "focus-without-user-activation 'none'";
iframe.contentWindow.postMessage({ type: 'focus-delayed' }, '*');

// Inside the iframe:
window.addEventListener('message', () => {
  targetInput.focus();
  parent.postMessage({
    type: 'focus-policy-result',
    focused: document.activeElement === targetInput
  }, '*');
});

// Feature-detect policy support:
const fp = document.featurePolicy || document.permissionsPolicy;
const allowed = fp ? fp.allowedFeatures().includes('focus-without-user-activation') : undefined;

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗