Skip to main content

Frame

An inline frame is used to embed another document within the current HTML document.

Props​

Props NameDescriptionType
allowSpecifies a Permissions Policy for the Frame component. The policy defines what features are available to the Frame (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.
Examples:
1. allow="camera 'none'; microphone 'none'"
2. allow="fullscreen"
When the video is opened in the Frame component, the fullScreen feature will be actived on the video.		string
urlSpecifies the address of the document to embed in the Frame.string
borderSpecifies the frame thickness.number
isLoadingLowers the opacity of the page.boolean

Methods​

Methods NameDescriptionExample Code
SendProvide a safe means of communication between documents on different domains.components.EdtrComp_1.Send("message")
postSends parameter to Frame with HTTP POST request.components.EdtrComp_1.post("https://...",{username: 'username', password: '123456'})

post method details​

Sends parameter to Frame with HTTP POST request.

parameters:

  • url: Required. Specifies where to send the form-data when a form is submitted.
  • params: Required. Parameters to be sent are entered.
  • enctype: Not required. Specifies how the form-data should be encoded when submitting it to the server. Values: application/x-www-form-urlencoded, multipart/form-data, text/plain

Events​

Events NameDescription
onMessageWhen a message is sent, a message event is fired on the destination window.
onLoadTriggered when the page loads.

Open HTML content in the Frame​

HTML content must start with <!DOCTYPE html>

const htmlContent = `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Embedded Content</title>
                <style>
                p {
                background-color: #FF0000 !important; 
                }
                </style>

            </head>
            <body>
                <h1>Hello, World!</h1>
                <p>This is an embedded HTML content.</p>
            </body>
            </html>
        `;

components.myFrame.url = htmlContent;

Samples Qjson​

FrameExample
FrameAllowFullScreenExample
OpenHtmlContentInFrame