behavior:frame

This element handles functionality of <frame>/<iframe> elements - containers of sub-documents inside host document.

The behavior can be applied to any block element, <div> or <section> for example.

Elements

These elements have behavior:frame applied by default:

<frame> - block document container;
<iframe> - inline block document container.

In Sciter, <frame> is an ordinary DOM element that can appear in any context where other block elements can appear. Not only as a child of <frameset>.

Model

<frame> element can have any arbitrary content initially. In this respect <frame> is not anyhow different from <div> or <section>.

<frame>
   <p>Select document to load</p> 
</frame>

After contect loading ( due to src attribute handling or .load() method call ) the frame will have single child element - root element of loaded document, <html> for example

The <frame> with loaded document:

<frame>
   <html>
     <head>...</head>  
     <body>...</body>  
   </html>
</form>

To access loaded document from script use frame[0] reference to get first child of the frame - child document root:

var frm = $(frame#main);
var childDoc = frm[0];
var someBtn = childDoc.$("button#some");
...

Attributes

<frame> attributes that have special meaning:

src="url" - optional, URL of document to load in the frame;
content-style="url" - optional, URL of .css file to be applied to the content. Useful when host document needs to apply some specific styles on top of styles defined in document itself.

State flags

:busy - this flag is in on state during document loading. It can be used to style "document loading..." state.

Events

DOCUMENT_CREATED event - generated as a first step of document loading. At this moment new document exists but empty;
DOCUMENT_COMPLETE event - document has finished loading - DOM is ready and all penfing resource requests have finished. Note: this attribute is Sciter specific.

Methods

frame.load: (url:string) : bool - initiates loading of the document from the URL;
frame.load: (html:string | bytes, baseUrl: string) : bool - loads content from the html string. baseUrl is used for resolving relative URLs inside the document.
frame.loadEmpty: () - clears the content of the frame by loading empty document in it.
frame.save: () : bytes - saves document as byte array in UTF-8 encoding;
frame.save: (fileUrl:string) : bool - saves document in file in UTF-8 encoding;

Properties

frame.mediaVars: read/write, object (name/value map) - key/value map of media variables used by the document.
frame.url: read/write, string - URL of document loaded into the frame.

Value

N/A

Frame events handling in script

var frame = $(frame#some);
btn.onControlEvent = function(evt)
{
  switch(evt.type) {
    case Event.DOCUMENT_CREATED: /* evt.target is the document */ break;
    case Event.DOCUMENT_COMPLETE: /* evt.target is the document */ break;
  }
}

event handler

event newdocument $(frame#some) { ... event handling code ... }
event complete $(frame#some) { ... event handling code ... }