WebFrame

Shows a web page inside your interface, for example in a floating window, with a small toolbar: the address, reload and "open in new tab".

import { WebFrame } from 'jarvis-react-ui';

Basic

Pass the page as url; only http: and https: addresses are loaded, anything else shows an error. title names the embedded page for screen readers (default: the host). Without height the frame fills the height of its container, e.g. a window; height sets a fixed height in pixels.

import { WebFrame } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <WebFrame
            url="https://www.openstreetmap.org/export/embed.html?bbox=8.52,47.36,8.56,47.38"
            title="Map"
            height={320}
        />
    );
}

In a floating window

import { useState } from 'react';
import { Button, WebFrame, WindowManager } from 'jarvis-react-ui';
import type { ManagedWindow } from 'jarvis-react-ui';

export default function InWindow() {
    const [windows, setWindows] = useState<ManagedWindow[]>([]);

    const open = () =>
        setWindows([
            {
                id: 'browser',
                title: 'Browser',
                floating: true,
                defaultRect: { x: 24, y: 70, w: 480, h: 320 },
                itemRenderer: () => <WebFrame url="https://example.com" />,
            },
        ]);

    return (
        <>
            <div className="absolute top-3 left-3 z-[1]">
                <Button variant="primary" onClick={open} disabled={windows.length > 0}>
                    Open browser window
                </Button>
            </div>
            <WindowManager
                windows={windows}
                assignments={{}}
                onAssignmentsChange={() => undefined}
                onClose={() => setWindows([])}
            />
        </>
    );
}

Pages that cannot be embedded

Warning: Many sites forbid embedding

Sites such as GitHub or Google send X-Frame-Options or a frame-ancestors policy, and the browser then leaves the frame empty. A page cannot detect this reliably, so the "Open in new tab" button is always there. For a real browser window inside your app, use a webview in Electron or Tauri.

import { WebFrame } from 'jarvis-react-ui';

export default function Blocked() {
    // github.com forbids embedding: the frame stays empty, "Open in new tab" still works.
    return <WebFrame url="https://github.com" height={200} />;
}

Security

The page runs in a sandboxed iframe. The default sandbox allows scripts, its own origin, forms and popups, which most pages need; pass a stricter value ("" blocks everything) for untrusted content. allow grants features like fullscreen or autoplay. The page gets only the origin as referrer, and "open in new tab" opens without window.opener.

Sound

The toolbar buttons play hover_button and click through the nearest SfxProvider. See Sound effects.

Accessibility

• The iframe is named by title (or the host). The toolbar buttons are named Reload and Open in new tab.
• An invalid address is announced with role="alert".

API