Options
All
  • Public
  • Public/Protected
  • All
Menu

Class IFrame

IFrame Represents a nested browsing context, embedding another HTML page into the current one.

param src
example
const myIFrame = new IFrame("/frame.html").sandbox("allow-scripts").csp("default-src 'self')
returns
  • Itself.

Hierarchy

Index

Constructors

Methods

Constructors

  • new IFrame(src?: string): IFrame

Methods

  • addAttribute(attribute: string, value: any): IFrame
  • addClass(...args: string[]): IFrame
  • addEventListener(event: string, callback: EventListener, options?: boolean | AddEventListenerOptions): IFrame
  • Attaches an event handler to the widget

    example
    myWidget.addEventListener("click", () => consoleLog("clicked"))
    

    Parameters

    • event: string

      A String that specifies the name of the event.

    • callback: EventListener

      Specifies the function to run when the event occurs.

    • options: boolean | AddEventListenerOptions = false

      A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

    Returns IFrame

    • Itself.
  • Sets alignment of the widget along the cross axis in parent layout space. This is the vertical axis for Row, horizontal axis for Column.

    example
    // Button will be aligned to center position in it's parent space.
    myWidget.align("center")
    // Button will be aligned to start position in it's parent space.
    // Once small breakpoint is reached, button will be aligned to end position.
    myWidget.align("start").align("end", "sm")

    Parameters

    Returns IFrame

    • Itself.
  • allow(...values: string[]): IFrame
  • example
    myIFrame.allow("camera", "layout-animations 'none'", "geolocation 'self' https://example.com")
    

    Parameters

    • Rest ...values: string[]

    Returns IFrame

    • Itself.
  • allowFullscreen(value?: boolean): IFrame
  • Allows activating fullscreen mode by calling the requestFullscreen() method.

    Parameters

    • value: boolean = true

    Returns IFrame

    • Itself.
  • allowPaymentRequest(value?: boolean): IFrame
  • Sets the cross-origin iframe should be allowed to invoke the Payment Request API.

    Parameters

    • value: boolean = true

    Returns IFrame

    • Itself.
  • Allows performing additional computations inside method chain by providing object - Itself..

    example
    myWidget.addChild(
    new Text().apply(self => {
    count(self, 0);
    })
    )
    function count(widget, timer) {
    widget.setText(`${timer++} seconds passed.`);
    setTimeout(()=>count(widget, timer), 1000);
    }

    Parameters

    Returns IFrame

    • Itself.
  • csp(...values: string[]): IFrame
  • Fills the widget on parent's available space on main axis relative to its content size or width value if its set.

    Parameters

    • value: boolean = true
    • Optional breakpoint: BREAKPOINT

    Returns IFrame

    • Itself.
  • fixPosition(value?: "fixed-top" | "fixed-bottom" | "sticky-top" | "sticky-sm-top" | "sticky-md-top" | "sticky-lg-top" | "sticky-xl-top"): IFrame
  • Fixes position on the screen. It will only work if parent's overflow poroperty not set.

    Parameters

    • Optional value: "fixed-top" | "fixed-bottom" | "sticky-top" | "sticky-sm-top" | "sticky-md-top" | "sticky-lg-top" | "sticky-xl-top"

    Returns IFrame

    • Itself.
  • Sets focus on the widget, if it can be focused. The focused widget will receive keyboard and similar events by default

    Returns IFrame

    • Itself.
  • getAttribute(attribute: string): undefined | string
  • Returns the value of a specified attribute on the widget.

    Parameters

    • attribute: string

    Returns undefined | string

    Attribute value of specified attribute.

  • getClientHeight(): number
  • getClientLeft(): number
  • Returns the width of the left border of an element in pixels.

    Returns number

    The width of the left border of an element in pixels.

  • getClientTop(): number
  • Returns the width of the top border of an element in pixels.

    Returns number

    The width of the top border of an element in pixels.

  • getClientWidth(): number
  • getDom(): HTMLElement
  • Returns html dom element of the widget.

    Returns HTMLElement

    Html dom element of the widget.

  • getHeight(): string
  • getInnerHTML(): any
  • getMaxHeight(): string
  • getMaxWidth(): string
  • getMinHeight(): string
  • getMinWidth(): string
  • getOffsetHeight(): number
  • Returns the height of an element, including vertical padding and borders, as an integer.

    Returns number

    the height of an element, including vertical padding and borders, as an integer.

  • getOffsetLeft(): number
  • Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

    Returns number

    The number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

  • getOffsetTop(): number
  • Returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

    Returns number

    The distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

  • getOffsetWidth(): number
  • getParent(): undefined | Widget
  • getProperty(property: string): any
  • Returns the value of a specified property of the widget's dom element.

    Parameters

    • property: string

    Returns any

    Value of a specified property.

  • getScrollHeight(): number
  • Returns the height of an element's content, including content not visible on the screen due to overflow

    Returns number

    the height of an element's content, including content not visible on the screen due to overflow.

  • getScrollLeft(): number
  • Returns the number of pixels that an element's content is scrolled from its left edge.

    Returns number

    the number of pixels that an element's content is scrolled from its left edge.

  • getScrollTop(): number
  • Returns the number of pixels that an element's content is scrolled vertically.

    Returns number

    the number of pixels that an element's content is scrolled vertically.

  • getScrollWidth(): number
  • Returns the width of an element's content, including content not visible on the screen due to overflow.

    Returns number

    the width of an element's content, including content not visible on the screen due to overflow.

  • getStyle(style: string): string
  • Returns the specified style property of the widget.

    Parameters

    • style: string

    Returns string

    Style property

  • getText(): any
  • getTransform(): string
  • getWidth(): string
  • grow(value?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "clear"): IFrame
  • Fills the widget on parent's available space on main axis.

    Parameters

    • value: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "clear" = 1

    Returns IFrame

    • Itself.
  • hasAttribute(attribute: string): boolean
  • hasChild(child: Widget): boolean
  • hasClass(className: string): boolean
  • Checks if specified CSS class is present in the widget.

    Parameters

    • className: string

    Returns boolean

  • isHidden(): boolean
  • isInViewport(): boolean
  • onMessageReceived(callback: EventListener): IFrame
  • Triggers the given callback function when iframe window receives message

    Parameters

    • callback: EventListener

    Returns IFrame

    • Itself.
  • postMessage(message: any, targetOrigin?: string): IFrame
  • Sends message object to iframe window.

    Parameters

    • message: any

      Data to be sent to the other window.

    • targetOrigin: string = "*"

      Specifies what the origin of targetWindow.

    Returns IFrame

    • Itself.
  • removeAttribute(...args: string[]): IFrame
  • removeChildAt(idx: number): IFrame
  • removeClass(...args: string[]): IFrame
  • removeEventListener(callback: EventListener, evnt?: string): IFrame
  • removeSpace(...args: string[]): IFrame
  • removeStyle(...args: string[]): IFrame
  • render(dom?: HTMLElement): IFrame
  • Renders widget to given html element once document is loaded.

    Parameters

    • dom: HTMLElement = document.body

    Returns IFrame

    • Itself.
  • Defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

    example
    // Rotates element by 90 degrees
    myWidget.rotate(90)

    // Rotates element by 2 turns
    myWidget.rotate(2, "turn")

    Parameters

    • Optional value: number
    • unit: ANGLE = "deg"

    Returns IFrame

    • Itself.
  • runOnMount(callback: () => void): IFrame
  • Runs given function after widget dom is mounted to document. Runs immediately if dom is already mounted.

    example
    myWidget.runOnMount(() => console.log("dom is mounted!"))
    

    Parameters

    • callback: () => void

      Function to run after widget's dom is mounted to document.

        • (): void
        • Returns void

    Returns IFrame

    • Itself.
  • sandbox(...values: string[]): IFrame
  • Applies extra restrictions to the content in the frame.

    example
    myIFrame.sandbox("allow-forms", "allow-scripts")
    

    Parameters

    • Rest ...values: string[]

    Returns IFrame

    • Itself.
  • scale(x?: number, y?: number): IFrame
  • Defines a transformation that resizes an element on the 2D plane

    example
    myWidget.scale(2, 2)
    

    Parameters

    • Optional x: number
    • Optional y: number

    Returns IFrame

    • Itself.
  • scrollIntoView(alignToTop?: boolean | ScrollIntoViewOptions): void
  • Scrolls widget into view.

    example
    myWidget.scrollIntoView()
    

    Parameters

    • Optional alignToTop: boolean | ScrollIntoViewOptions

    Returns void

    • Itself.
  • Sets background color of widget.

    Parameters

    • Optional value: BG_COLOR

      primary | secondary | success | danger | warning | info | light | dark

    • gradient: boolean = false

    Returns IFrame

    • this.
  • setBgColorState(bgColorState?: State<any>): IFrame
  • setBgGradient(values?: string[], options?: { angleOrPos?: string | number; repeat?: boolean; type?: "linear" | "radial" }): IFrame
  • Creates an image consisting of a progressive transition between two or more colors.

    see

    linear-gradient

    see

    radial-gradient

    example
    myWidget.setBgGradient([green, "red 50%"], {type: linear, angleOrPos:60})
    myWidget.setBgGradient([green %10, "red 50%"], {type: linear, angleOrPos:"to bottom right"})
    myWidget.setBgGradient([green, "red 50%"], {type: radial, angleOrPos:"closest-corner"})

    Parameters

    • Optional values: string[]
    • Optional options: { angleOrPos?: string | number; repeat?: boolean; type?: "linear" | "radial" }
      • Optional angleOrPos?: string | number

        The angle or position of the gradient.

      • Optional repeat?: boolean
      • Optional type?: "linear" | "radial"

    Returns IFrame

    • Itself.
  • setBgHoverColor(value?: "light" | "dark"): IFrame
  • setBgImage(value?: string): IFrame
  • Sets background images on the widget.

    Parameters

    • Optional value: string

      Path to image, valid inputs: "url", "none", "initial", "inherit", "revert", "unset"

    Returns IFrame

    • Itself.
  • setBgPosition(x?: number | "center" | "inherit" | "initial" | "revert" | "unset" | "left" | "right", y?: number | "center" | "top" | "bottom", unit?: UNIT): IFrame
  • Sets the initial position for each background image.

    Parameters

    • Optional x: number | "center" | "inherit" | "initial" | "revert" | "unset" | "left" | "right"
    • Optional y: number | "center" | "top" | "bottom"
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • setBgRepeat(x?: "inherit" | "initial" | "revert" | "unset" | "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y", y?: "repeat" | "space" | "round" | "no-repeat"): IFrame
  • Sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

    Parameters

    • Optional x: "inherit" | "initial" | "revert" | "unset" | "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y"
    • Optional y: "repeat" | "space" | "round" | "no-repeat"

    Returns IFrame

    • Itself.
  • setBgSize(x?: number | "inherit" | "initial" | "revert" | "unset" | "cover" | "contain" | "auto", y?: number | "auto", unit?: UNIT): IFrame
  • Sets the size of the widgets's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

    Parameters

    • Optional x: number | "inherit" | "initial" | "revert" | "unset" | "cover" | "contain" | "auto"
    • y: number | "auto" = "auto"
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • setBorder(value?: BORDER | BORDER[], options?: { color?: COLOR; subtractive?: boolean; width?: 1 | 2 | 3 | 4 | 5 }): IFrame
  • Adds or removes this element’s borders

    Parameters

    • Optional value: BORDER | BORDER[]

      Additive border value.

    • Optional options: { color?: COLOR; subtractive?: boolean; width?: 1 | 2 | 3 | 4 | 5 }
      • Optional color?: COLOR
      • Optional subtractive?: boolean
      • Optional width?: 1 | 2 | 3 | 4 | 5

    Returns IFrame

    • Itself.
  • setBottomPos(value?: string | number, unit?: UNIT): IFrame
  • setBrightness(value?: number, unit?: UNIT): IFrame
  • setClass(...args: string[]): IFrame
  • setDisplayOrder(value?: 0 | 1 | 2 | 3 | 4 | 5 | "first" | "last", breakpoint?: BREAKPOINT): IFrame
  • setDropShadow(x?: number, y?: number, options?: { blur?: number; color?: string; unit?: UNIT }): IFrame
  • Applies a drop shadow effect to the input image.

    Parameters

    • Optional x: number
    • Optional y: number
    • Optional options: { blur?: number; color?: string; unit?: UNIT }
      • Optional blur?: number
      • Optional color?: string
      • Optional unit?: UNIT

    Returns IFrame

    • Itself.
  • setEditable(value?: boolean): IFrame
  • setFontItalic(value?: boolean): IFrame
  • setFontMonospace(value?: boolean): IFrame
  • setFontSize(value?: string | number, unit?: UNIT): IFrame
  • setFontWeight(value?: "light" | "bold" | "bolder" | "normal" | "lighter"): IFrame
  • setHeight(value?: string | number, unit?: UNIT): IFrame
  • setInnerHTML(value?: string): IFrame
  • setLeftPos(value?: string | number, unit?: UNIT): IFrame
  • setLoading(value?: "eager" | "lazy"): IFrame
  • Indicates how the browser should load the iframe.

    Parameters

    • Optional value: "eager" | "lazy"
      • eager: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
      • lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.

    Returns IFrame

    • Itself.
  • setMaxHeight(value?: string | number, unit?: UNIT): IFrame
  • setMaxSize(width?: string | number, height?: string | number, unit?: UNIT): IFrame
  • Sets max width and max height of the widget.

    Parameters

    • Optional width: string | number
    • Optional height: string | number
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • setMaxWidth(value?: string | number, unit?: UNIT): IFrame
  • setMinHeight(value?: string | number, unit?: UNIT): IFrame
  • setMinSize(width?: string | number, height?: string | number, unit?: UNIT): IFrame
  • Sets min width and min height of the widget.

    Parameters

    • Optional width: string | number
    • Optional height: string | number
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • setMinWidth(value?: string | number, unit?: UNIT): IFrame
  • setOpacity(value?: number): IFrame
  • Sets the opacity of an widget. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

    Parameters

    • Optional value: number

    Returns IFrame

    • Itself.
  • setOrigin(x?: number | "center" | "left" | "right", y?: number | "center" | "top" | "bottom", unit?: UNIT): IFrame
  • Sets the rotation origin. Clears if nothing is passed.

    Parameters

    • Optional x: number | "center" | "left" | "right"
    • Optional y: number | "center" | "top" | "bottom"
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • setPointerInteraction(value?: "auto" | "none"): IFrame
  • The position property sets how an element is positioned in a document. The setTopPos, setRightPos, setBottomPos, and setLeftPos properties determine the final location of positioned elements.

    Parameters

    Returns IFrame

    • Itself.
  • setProperty(property: string, value: any): IFrame
  • setRatio(ratio?: "1x1" | "4x3" | "16x9" | "21x9"): IFrame
  • Manages the aspect ratios of content. Width needs to be defined.

    Parameters

    • Optional ratio: "1x1" | "4x3" | "16x9" | "21x9"

    Returns IFrame

    • Itself.
  • setReferrerPolicy(...values: string[]): IFrame
  • Referrer Policy Indicates which referrer to send when fetching the frame's resource.

    example
    myIFrame.setReferrerPolicy("same-origin)
    

    Parameters

    • Rest ...values: string[]

    Returns IFrame

    • Itself.
  • setResizable(value?: string): IFrame
  • Sets the resizing methot of layout. The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

    Parameters

    • Optional value: string

    Returns IFrame

    • Itself.
  • setRightPos(value?: string | number, unit?: UNIT): IFrame
  • setRound(value?: "start" | "end" | "top" | "bottom" | "all" | "circle" | "pill", size?: 0 | 1 | 2 | 3 | 4 | 5): IFrame
  • Sets or removes round corners.

    Parameters

    • Optional value: "start" | "end" | "top" | "bottom" | "all" | "circle" | "pill"
    • Optional size: 0 | 1 | 2 | 3 | 4 | 5

    Returns IFrame

    Itsellf

  • setScrollLeft(value: number): IFrame
  • setScrollTop(value: number): IFrame
  • setShadow(value?: "sm" | "md" | "lg" | "xl"): IFrame
  • setSize(width?: string | number, height?: string | number, unit?: UNIT): IFrame
  • Sets width and height of the widget.

    Parameters

    • Optional width: string | number
    • Optional height: string | number
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • setSpace(...args: string[]): IFrame
  • The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

    Where property is one of:

    • m - for classes that set margin
    • p - for classes that set padding

      Where sides is one of:
    • t - for classes that set margin-top or padding-top
    • b - for classes that set margin-bottom or padding-bottom
    • s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
    • e - for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
    • x - for classes that set both *-left and *-right
    • y - for classes that set both *-top and *-bottom
    • blank - for classes that set a margin or padding on all 4 sides of the element

      Where size is one of:
    • 0 - for classes that eliminate the margin or padding by setting it to 0
    • 1 - (by default) for classes that set the margin or padding to $spacer * .25
    • 2 - (by default) for classes that set the margin or padding to $spacer * .5
    • 3 - (by default) for classes that set the margin or padding to $spacer
    • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
    • 5 - (by default) for classes that set the margin or padding to $spacer * 3
    • auto - for classes that set the margin to auto
    example
    myWidget.setSpace("m-2", "ps-1")
    

    Parameters

    • Rest ...args: string[]

    Returns IFrame

    • Itself.
  • setStyle(type: string, value: any): IFrame
  • Set a specific style of an element using different CSS properties.

    example
    myWidget.setStyle("backgroundColor", "white")
    

    Parameters

    • type: string
    • value: any

    Returns IFrame

  • setText(value?: string): IFrame
  • setTextBreak(value?: boolean): IFrame
  • setTextDecoration(value?: "none" | "underline" | "line-through"): IFrame
  • setTextInteraction(value?: "auto" | "all" | "none"): IFrame
  • setTextLineHeight(value?: "sm" | "lg" | "1" | "base"): IFrame
  • setTextOverflow(value?: "clip" | "ellipsis"): IFrame
  • setTextShadow(value?: "sm" | "md" | "lg", color?: string): IFrame
  • setTextTransform(value?: "lowercase" | "uppercase" | "capitalize"): IFrame
  • setTextWrap(value?: "wrap" | "nowrap"): IFrame
  • setTooltip(content?: string, options?: { animation?: boolean; delay?: number; offset?: [number, number]; onHide?: () => any; onShow?: () => any; placement?: "left" | "right" | "top" | "bottom" | "auto"; title?: string; trigger?: "click" | "hover" | "focus" | "manual" }): IFrame
  • Adds tooltip to given position. Existing tooltip will be removed if title is not given.

    Parameters

    • Optional content: string
    • Optional options: { animation?: boolean; delay?: number; offset?: [number, number]; onHide?: () => any; onShow?: () => any; placement?: "left" | "right" | "top" | "bottom" | "auto"; title?: string; trigger?: "click" | "hover" | "focus" | "manual" }
      • Optional animation?: boolean

        Apply a CSS fade transition to the popover

      • Optional delay?: number

        Delay showing the popover (ms)

      • Optional offset?: [number, number]

        Offset of the popover relative to its target

      • Optional onHide?: () => any
          • (): any
          • Returns any

      • Optional onShow?: () => any
          • (): any
          • Returns any

      • Optional placement?: "left" | "right" | "top" | "bottom" | "auto"

        How to position the popover { "top" | "bottom" | "right" | "left" | "auto" }

      • Optional title?: string
      • Optional trigger?: "click" | "hover" | "focus" | "manual"

        How popover is triggered { "click" | "hover" | "focus" | "manual" }

    Returns IFrame

    • Itself.
  • setTopPos(value?: string | number, unit?: UNIT): IFrame
  • setTransform(value?: string): IFrame
  • setVisibility(value?: boolean): IFrame
  • Control the visibility of elements, without modifying their display, with visibility utilities. Invisible widgets still take up space in the page.

    Parameters

    • Optional value: boolean

    Returns IFrame

    • Itself.
  • setWidth(value?: string | number, unit?: UNIT): IFrame
  • setZIndex(value?: number): IFrame
  • Defines a transformation that skews an element on the 2D plane.

    example
    myWidget.skew(.2, .4, "rad")
    

    Parameters

    • Optional x: number
    • Optional y: number
    • unit: ANGLE = "deg"

    Returns IFrame

    • Itself.
  • translate(x?: number, y?: number, unit?: UNIT): IFrame
  • Repositions an element in the horizontal and/or vertical directions

    example
    myWidget.translate(100, 80)
    

    Parameters

    • Optional x: number
    • Optional y: number
    • unit: UNIT = "px"

    Returns IFrame

    • Itself.
  • translateMiddle(value?: "clear" | "both" | "x" | "y"): IFrame
  • Applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

    Parameters

    • value: "clear" | "both" | "x" | "y" = "both"

    Returns IFrame

    • Itself.
  • truncateText(value?: boolean): IFrame

Generated using TypeDoc