Zoomable Frame
<wa-zoomable-frame>
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 Jump to heading
Loading external content Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
srcsrc |
The URL of the content to display.
Type
string |
||
srcdocsrcdoc |
Inline HTML to display.
Type
string |
||
allowfullscreenallowfullscreen |
Allows fullscreen mode.
Type
booleanDefault
false |
||
loadingloading |
Controls iframe loading behavior.
Type
'eager' | 'lazy'Default
'eager' |
||
referrerpolicyreferrerpolicy |
Controls referrer information.
Type
string |
||
sandboxsandbox |
Security restrictions for the iframe.
Type
string |
||
zoomzoom |
The current zoom of the frame, e.g. 0 = 0% and 1 = 100%.
Type
numberDefault
1 |
|
|
zoomLevelszoom-levels |
The zoom levels to step through when using zoom controls. This does not restrict programmatic changes to the zoom.
Type
stringDefault
'25% 50% 75% 100% 125% 150% 175% 200%' |
||
withoutControlswithout-controls |
Removes the zoom controls.
Type
booleanDefault
false |
|
|
withoutInteractionwithout-interaction |
Disables interaction when present.
Type
booleanDefault
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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
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';