Zoomable Frame

<wa-zoomable-frame> Since 3.0 stable

Zoomable frames render iframe content with zoom and interaction controls. 

<wa-zoomable-frame src="https://backers.webawesome.com/" zoom="0.5"> </wa-zoomable-frame>

Examples

Loading external content

Use the src attribute to embed external websites or resources. The URL must be accessible, and cross-origin restrictions may apply due to the Same-Origin Policy, potentially limiting access to the iframe's content.

<wa-zoomable-frame src="https://example.com/"> </wa-zoomable-frame>

The zoomable frame fills 100% width by default with a 16:9 aspect ratio. Customize this using the aspect-ratio CSS property.

<wa-zoomable-frame src="https://example.com/" style="aspect-ratio: 4/3;"> </wa-zoomable-frame>

Use the srcdoc attribute or property to display custom HTML content directly within the iframe, perfect for rendering inline content without external resources.

<wa-zoomable-frame srcdoc="<html><body><h1>Hello, World!</h1><p>This is inline content.</p></body></html>">
</wa-zoomable-frame>

When both src and srcdoc are specified, srcdoc takes precedence.

Controlling zoom behavior

Set the zoom attribute to control the frame's zoom level. Use 1 for 100%, 2 for 200%, 0.5 for 50%, and so on.

Define specific zoom increments with the zoom-levels attribute using space-separated percentages and decimal values like zoom-levels="0.25 0.5 75% 100%".

<wa-zoomable-frame src="https://backers.webawesome.com/" zoom="0.5" zoom-levels="50% 0.75 100%"> </wa-zoomable-frame>

Hiding zoom controls

Add the without-controls attribute to hide the zoom control interface from the frame.

<wa-zoomable-frame src="https://backers.webawesome.com/" without-controls zoom="0.5"> </wa-zoomable-frame>

Preventing user interaction

Apply the without-interaction attribute to make the frame non-interactive. Note that this prevents keyboard navigation into the frame, which may impact accessibility for some users.

<wa-zoomable-frame src="https://backers.webawesome.com/" zoom="0.5" without-interaction> </wa-zoomable-frame>

Slots

Learn more about using slots.

Name Description
zoom-in-icon The slot that contains the zoom in icon.
zoom-out-icon The slot that contains the zoom out icon.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
src
src
The URL of the content to display.
Type string
srcdoc
srcdoc
Inline HTML to display.
Type string
allowfullscreen
allowfullscreen
Allows fullscreen mode.
Type boolean
Default false
loading
loading
Controls iframe loading behavior.
Type 'eager' | 'lazy'
Default 'eager'
referrerpolicy
referrerpolicy
Controls referrer information.
Type string
sandbox
sandbox
Security restrictions for the iframe.
Type string
zoom
zoom
The current zoom of the frame, e.g. 0 = 0% and 1 = 100%.
Type number
Default 1
zoomLevels
zoom-levels
The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom.
Type string
Default '25% 50% 75% 100% 125% 150% 175% 200%'
withoutControls
without-controls
Removes the zoom controls.
Type boolean
Default false
withoutInteraction
without-interaction
Disables interaction when present.
Type boolean
Default false
contentWindow
Returns the internal iframe's window object. (Readonly property)
Type Window | null
contentDocument
Returns the internal iframe's document object. (Readonly property)
Type Document | null

Methods

Learn more about methods.

Name Description Arguments
zoomIn() Zooms in to the next available zoom level.
zoomOut() Zooms out to the previous available zoom level.

Events

Learn more about events.

Name Description
load Emitted when the internal iframe when it finishes loading.
error Emitted from the internal iframe when it fails to load.

CSS parts

Learn more about CSS parts.

Name Description
iframe The internal <iframe> element.
controls The container that surrounds zoom control buttons.
zoom-in-button The zoom in button.
zoom-out-button The zoom out button.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/zoomable-frame/zoomable-frame.js';

To manually import this component from NPM, use the following code. 

import '@awesome.me/webawesome/dist/components/zoomable-frame/zoomable-frame.js';

To manually import this component from React, use the following code. 

import '@awesome.me/webawesome/dist/react/zoomable-frame';
Need a hand? Report a bug Ask for help
    No results