Namespace: DynamicFrame

DynamicFrame

Properties:
Name Type Description
url

The URL to fetch
executeScripts

If true will find and execute scripts in the response body
mode

The mode to use for adding the response content, either replace, append or prepend (Defaults to replace)
mountPoint

A selector used to find the element to mount to within the element (defaults to the root element)
autoRefresh num

Will call refresh() automatically at the specified interval (Intervals are in the format $${unit} where unit is one of ms, s, m, h: 10s = 10 seconds)
delay

An artificial delay applied before displaying the content
stateKey

An optional key, if specified the frame state will be stored and loaded from the page query string
contained

If true then the frame will be self contained, clicking links and submitting forms will be handled within the frame and not impact the surrounding page
Source:

Example

<dynamic-frame :url="/some/url" :param-day="Monday" :mount-point=".content">
    <div class="content"></div>
 </dynamic-frame>

Methods

#bind()

Call the base bind() and re-find the mountPoint in case it's changed

Source:

containFrame(containAll)

Makes the frame self contained
Clicking any links or submitting any forms will only impact the frame, not the surrounding page

Parameters:
Name Type Default Description
containAll bool false

Whether to automatically contain all a and form elements
If not set then it will be opt in per element.
Source:

destroySelf()

Remove self from DOM and remove state from query string

Source:

#endpoint() → {string}

Returns the endpoint to call - from the :url attr on the root element

Source:
Returns:
Type
string

(async) #init()

Setup the DynamicFrame and do the initial request/load

Source:

(async) #loadContent()

[async] Makes a new request and replaces or appends the response to the mountPoint
Returns true on success
Multiple calls will abort previous requests and return false

Source:
Returns:

boolean - true on success

loadState() → {object}

Load the frame state based on the main page URL query string

Source:
Returns:

The frame state

Type
object

loadUrl(url)

Loads a URL into the frame by updating the url and param attributes and then reload

Parameters:
Name Type Description
url *
Source:

#params() → {URLSearchParams}

Returns the query string params for the request - expected to be overridden
Handles arrays as duplicated params (ie. a: [1,2] => ?a=1&a=2)

Source:
Returns:
Type
URLSearchParams

(async) #refresh()

Reload the frame content then call render()

Source:

saveState()

Save the frame state to the outer page URL query string and add to history
Only saves if the state has changed

Source:

#setAutoRefresh()

Sets an interval to auto call this.refresh()
Overwrites previously set refresh intervals

Source:

setParams(values)

Set key/value pairs of params in the element attributes

Parameters:
Name Type Description
values object
Source:

#updateContent(content, mode)

Actually updates the content
This is where the artificial delay is applied

Parameters:
Name Type Default Description
content

The content to use
mode null

replace or append, defaults to this.args.mode
Source: