IframePreview

IframePreview shows another page inside a preview frame. Use it for a live example built with something other than Blazor : a WebAssembly build of a desktop UI toolkit, a plain HTML page, an embedded playground. The frame keeps the same toolbar as every other preview and can carry code tabs.

Basic use

<IframePreview Src="/demos/theme-frame.html" Height="220" Title="A page in a frame" />

The page in the frame is a static file in this site's wwwroot. Switch the site's theme and it follows.

With code tabs

An iframe preview has no Razor source to show, so its Code panel is hidden until you give it tabs.

<IframePreview Src="/demos/theme-frame.html" Height="220" />

window.addEventListener('message', e => {
    if (e.data?.type === 'shelldocs-theme') applyTheme(e.data.theme);
});

Loading

Each iframe starts its own page, and a heavy one starts its own app. Lazy decides when.

With Lazy="click", nothing loads until the reader asks:

<IframePreview Src="/demos/theme-frame.html?c=click" Height="220" Lazy="click" Id="iframe-on-click" />

Theme

The page in the frame is told the site's theme twice:

• ?theme=light or ?theme=dark is added to its URL when it loads.
• A message is posted to it whenever the reader switches theme: { type: "shelldocs-theme", theme: "light" | "dark" }.

The page reads both:

const params = new URLSearchParams(location.search);
applyTheme(params.get('theme') === 'dark' ? 'dark' : 'light');

window.addEventListener('message', e => {
    if (e.data?.type === 'shelldocs-theme') applyTheme(e.data.theme);
});

Static hosts

The loading, the theme parameter and the theme message are handled by shelldocs.js, so an iframe preview behaves the same on a static export. The page in the frame has to be reachable there too: a file under wwwroot is copied into the export by shelldocs build.

Props

See also