Introduction

The frame container component provides a basic page layout container. It supports a customizable content area, page state management, page loading state display, and other features. It is a foundational component for building page layouts, suitable for scenarios that require unified page structure and state management.

Usage

Local import. Configure it in the index.json of the page or component where it is needed.

"usingComponents": {
  "fs-frame":"ava-ui/fxui/FsFrame/FsFrame"
}

Code Demo

API

Parameters

Parameter	Description	Type	Optional Values	Default
height	Height	string	—	'100%'
autoHeight	Whether to use automatic height	boolean	—	false
srcdoc	iframe content	string	—	''
src	iframe URL	string	—	""
thirdH5	Whether to support third-party H5 pages	boolean	true/false	false

Events

Name	Parameter	Description
onLoad	-	Triggered when the iframe finishes loading
onMessage	event	Triggered when a message is received from the iframe
onResize	event	Triggered when the iframe size changes (supported when thirdH5 is true)

iframe Standard Usage

Basic Configuration

When loading third-party H5 pages, it is recommended to set thirdH5 to true for better compatibility and more complete event support.

<iframe 
  src="https://example.com/page.html"
  thirdH5="{{true}}"
  bind:onLoad="handleLoad"
  bind:onMessage="handleMessage"
  bind:onResize="handleResize"
/>

Notes

1. thirdH5 property: When loading third-party H5 pages, make sure to set thirdH5="{{true}}" to ensure events are triggered normally.
2. Event binding: Use the bind: prefix to bind events, such as bind:onLoad, bind:onMessage, bind:onResize.
3. Message communication: Send messages to the iframe via the sendMessage method, and receive messages via the onMessage event.
4. Size adaptation: Use the onResize event to make the content adapt its height automatically.
5. Security considerations: When loading third-party pages, verify the message source and content to avoid security risks.

打开预览