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.


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>.


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

   <p>Select document to load</p> 

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:


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");


<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.


  • 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.


(url:string) – initiates loading of the document from the URL;
(html:string, baseUrl: string) – loads content from the html string. baseUrl is used for resolving relative URLs inside the document.
() – clears the content of the frame by loading empty document in it.
() : object – returns key/value map of media variables used by the document.
( map: object [,reset: true | false] ) – sets media variables to the loaded document and if reset is true applies them.



Frame events handling in script

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

decorators.tis handler

include "decorators.tis";
@when Event.DOCUMENT_COMPLETE @on "frame#some" :: ... event handling code ...;