tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
108 lines • 5.46 kB
text/typescript
export default TinyHtmlIframe;
/**
* TinyHtmlIframe is a helper class for managing <iframe> elements.
* It supports all standard attributes with validation and type safety.
*
* @example
* const iframe = new TinyHtmlIframe({
* src: 'https://example.com',
* width: 600,
* height: 400,
* loading: 'lazy',
* sandbox: 'allow-scripts allow-same-origin',
* referrerpolicy: 'no-referrer',
* });
*
* @extends TinyHtmlTemplate<HTMLIFrameElement>
*/
declare class TinyHtmlIframe extends TinyHtmlTemplate<HTMLIFrameElement> {
/**
* Creates a new TinyHtmlIframe instance with the specified configuration options.
*
* @param {Object} [config={}] - Configuration object for the iframe element.
* @param {string} [config.src] - The URL of the page to embed inside the iframe.
* @param {string} [config.srcdoc] - Inline HTML content to display inside the iframe (overrides `src` if provided).
* @param {string} [config.name] - A name for the browsing context (used as the target for links or forms).
* @param {string} [config.allow] - Permissions policy for the iframe (e.g., `"fullscreen; autoplay"`).
* @param {boolean} [config.allowFullScreen=false] - Whether the iframe is allowed to display content in fullscreen mode.
* @param {boolean} [config.browsingtopics] - Enables the Browsing Topics API.
* @param {boolean} [config.credentialless] - Enables credentialless mode for cross-origin iframes.
* @param {string} [config.csp] - Content Security Policy applied specifically to the iframe's content.
* @param {string} [config.sandbox] - A space-separated list of sandboxing flags that restrict iframe capabilities.
* @param {'no-referrer'|'no-referrer-when-downgrade'|'origin'|'origin-when-cross-origin'|'same-origin'|'strict-origin'|'strict-origin-when-cross-origin'|'unsafe-url'} [config.referrerpolicy] - Referrer policy to control the amount of referrer information sent.
* @param {number|string} [config.width] - Width of the iframe in pixels or as a CSS dimension string (e.g., `"100%"`).
* @param {number|string} [config.height] - Height of the iframe in pixels or as a CSS dimension string (e.g., `"500px"`).
* @param {string} [config.title] - Accessible title for the iframe content.
* @param {'lazy'|'eager'} [config.loading] - Loading strategy for the iframe. `"lazy"` defers loading until visible in the viewport.
* @param {string|string[]|Set<string>} [config.tags=[]] - Additional tags or identifiers for this instance.
* @param {string} [config.mainClass=''] - A main CSS class applied to the iframe element.
*/
constructor({ src, srcdoc, name, allow, allowFullScreen, browsingtopics, credentialless, csp, sandbox, referrerpolicy, width, height, title, loading, tags, mainClass, }?: {
src?: string | undefined;
srcdoc?: string | undefined;
name?: string | undefined;
allow?: string | undefined;
allowFullScreen?: boolean | undefined;
browsingtopics?: boolean | undefined;
credentialless?: boolean | undefined;
csp?: string | undefined;
sandbox?: string | undefined;
referrerpolicy?: "origin" | "same-origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined;
width?: string | number | undefined;
height?: string | number | undefined;
title?: string | undefined;
loading?: "eager" | "lazy" | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
});
/** @param {string} src */
set src(src: string);
/** @returns {string|null} */
get src(): string | null;
/** @param {string} srcdoc */
set srcdoc(srcdoc: string);
/** @returns {string|null} */
get srcdoc(): string | null;
/** @param {string} name */
set name(name: string);
/** @returns {string|null} */
get name(): string | null;
/** @param {string} allow */
set allow(allow: string);
/** @returns {string|null} */
get allow(): string | null;
/** @param {boolean} allowFullScreen */
set allowFullScreen(allowFullScreen: boolean);
/** @returns {boolean} */
get allowFullScreen(): boolean;
/** @param {boolean} browsingtopics */
set browsingtopics(browsingtopics: boolean);
/** @returns {boolean} */
get browsingtopics(): boolean;
/** @param {boolean} credentialless */
set credentialless(credentialless: boolean);
/** @returns {boolean} */
get credentialless(): boolean;
/** @param {string} csp */
set csp(csp: string);
/** @returns {string|null} */
get csp(): string | null;
/** @param {string} sandbox */
set sandbox(sandbox: string);
/** @returns {string|null} */
get sandbox(): string | null;
/** @param {string} referrerpolicy */
set referrerpolicy(referrerpolicy: string);
/** @returns {string|null} */
get referrerpolicy(): string | null;
/** @param {string} title */
set title(title: string);
/** @returns {string|null} */
get title(): string | null;
/** @param {'lazy'|'eager'} loading */
set loading(loading: "lazy" | "eager");
/** @returns {string|null} */
get loading(): string | null;
}
import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
//# sourceMappingURL=TinyHtmlIframe.d.mts.map