@tempots/dom/renderable/iframe.d.ts

Fully-typed frontend framework alternative to React and Angular

import { SplitValue, TNode, Value } from '../types/domain';
export type ReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
export interface IFrameOptions {
    /**
     * The URL of the page to embed in the iframe.
     */
    src?: Value<string>;
    /**
     * The name of the iframe.
     */
    name?: Value<string>;
    /**
     * The width of the iframe.
     */
    width?: SplitValue<string | number>;
    /**
     * The height of the iframe.
     */
    height?: SplitValue<string | number>;
    /**
     * The sandbox attribute for the iframe.
     */
    sandbox?: Value<string>;
    /**
     * The allow attribute for the iframe.
     */
    allow?: Value<string>;
    /**
     * The referrerpolicy attribute for the iframe.
     */
    referrerpolicy?: Value<ReferrerPolicy>;
    /**
     * The loading attribute for the iframe.
     */
    loading?: Value<'eager' | 'lazy'>;
    /**
     * Callback function that is called when the iframe is loaded.
     * Receives the iframe element and its contentDocument.
     */
    onLoad?: (iframe: HTMLIFrameElement) => void;
    /**
     * Content to attach directly to the iframe's element, not the document body.
     */
    iframeChild?: TNode;
}
/**
 * Creates an iframe element and optionally renders content into its document.
 *
 * When children are provided, they are rendered into the iframe's contentDocument.
 * This allows you to create isolated DOM contexts with their own styles and scripts.
 *
 * @example
 * ```typescript
 * // Simple iframe with src
 * IFrame({ src: 'https://example.com', width: 800, height: 600 })
 * ```
 *
 * @example
 * ```typescript
 * // Iframe with rendered content
 * IFrame(
 *   { width: 800, height: 600 },
 *   html.div(
 *     html.style('body { font-family: sans-serif; }'),
 *     html.h1('Hello from iframe!'),
 *     html.p('This content is rendered inside the iframe')
 *   )
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Iframe with onLoad callback
 * IFrame(
 *   {
 *     width: 800,
 *     height: 600,
 *     onLoad: (iframe, doc) => {
 *       console.log('Iframe loaded:', doc.title)
 *     }
 *   },
 *   html.div('Content')
 * )
 * ```
 *
 * @param options - Configuration options for the iframe
 * @param children - Optional content to render inside the iframe's document
 * @returns A renderable that creates and manages the iframe
 * @public
 */
export declare function IFrame({ src, name, width, height, sandbox, allow, referrerpolicy, loading, iframeChild, onLoad, }?: IFrameOptions, ...children: TNode[]): import('..').Renderable;