# Yahoo! UI Library

### editor 3.3.0

Yahoo! UI Library > editor > Frame
Search:
Filters Show Private Show Protected Show Deprecated

## Class Frame - extends Base

Creates a wrapper around an iframe. It loads the content either from a local file or from script and creates a local YUI instance bound to that new window and document.

### Constructor

Frame `( )`

### Properties

#### _iframe - `private Node`

Internal Node reference to the iFrame or the window

#### _instance - `private YUI`

Internal reference to the YUI instance bound to the iFrame or window

#### _ready - `private Boolean`

Internal reference set when the content is ready.

#### _rendered - `private Boolean`

Internal reference set when render is called.

#### DEFAULT_CSS - `static String`

The default css used when creating the document.

#### DOC_TYPE - `static String`

The DOCTYPE to prepend to the new document when created. Should match the one on the page being served.

#### DOM_EVENTS - `static Object`

The DomEvents that the frame automatically attaches and bubbles

#### HTML - `static String`

The template string used to create the iframe

#### META - `static String`

The meta-tag for Content-Type to add to the dynamic document

#### NAME - `static String`

The name of the class (frame)

#### PAGE_HTML - `static String`

The template used to create the page when created dynamically.

#### Properties inherited from Plugin.Host:

`PluginHost`

#### Properties inherited from Attribute:

``

#### Properties inherited from Base:

`name`

### Methods

#### _create

`private Object _create ( )`
Create the iframe or Window and get references to the Document & Window

Returns: `Object`
  Hash table containing references to the new Document & Window

#### _defReadyFn

`private void _defReadyFn ( )`
Binds DOM events, sets the iframe to visible and fires the ready event

#### _DOMPaste

`private void _DOMPaste ( e )`
Simple pass thru handler for the paste event so we can do content cleanup

Parameters:
  `e <Event.Facade>`

#### _fixIECursors

`private void _fixIECursors ( )`
It appears that having a BR tag anywhere in the source "below" a table with a percentage width (in IE 7 & 8) if there is any TEXTINPUT's outside the iframe, the cursor will rapidly flickr and the CPU would occasionally spike. This method finds all
's below the sourceIndex of the first table. Does some checks to see if they can be modified and replaces then with a so the layout will remain in tact, but the flickering will no longer happen.

#### _getHTML

`private String _getHTML ( html )`
Get the content from the iframe

Parameters:
  `html <String>` The raw HTML from the body of the iframe.

#### _handleFocus

`private void _handleFocus ( )`
Does some tricks on focus to set the proper cursor position.

#### _instanceLoaded

`private void _instanceLoaded ( inst )`
Called from the first YUI instance that sets up the internal instance. This loads the content into the window/frame and attaches the contentready event.

Parameters:
  `inst <YUI>` The internal YUI instance bound to the frame/window

#### _onContentReady

`private void _onContentReady ( )`
Called once the content is available in the frame/window and calls the final use call on the internal instance so that the modules are loaded properly.

#### _onDomEvent

`private void _onDomEvent ( e )`
Generic handler for all DOM events fired by the iframe or window. This handler takes the current EventFacade and augments it to fire on the Frame host. It adds two new properties to the EventFacade called frameX and frameY which adds the scroll and xy position of the iframe to the original pageX and pageY of the event so external nodes can be positioned over the frame.

Parameters:
  `e <Event.Facade>`

#### _resolveBaseHref

`private String _resolveBaseHref ( href )`
Resolves the basehref of the page the frame is created on. Only applies to dynamic content.

Parameters:
  `href <String>` The new value to use, if empty it will be resolved from the current url.

#### _resolveWinDoc

`private Object _resolveWinDoc ( c )`
Resolves the document and window from an iframe or window instance

Parameters:
  `c <Object>` The YUI Config to add the window and document to

Returns: `Object`
  Object hash of window and document references, if a YUI config was passed, it is returned.

#### _setExtraCSS

`private void _setExtraCSS ( )`
Set's the extra CSS on the instance..

#### _setHTML

`private String _setHTML ( html )`
Set the content of the iframe

Parameters:
  `html <String>` The raw HTML to set the body of the iframe to.

#### _setLinkedCSS

`private void _setLinkedCSS ( )`
Set's the linked CSS on the instance..

#### delegate

`EventHandle delegate ( type , fn , cont , sel )`
A delegate method passed to the instance's delegate method

Parameters:
  `type <String>` The type of event to listen for
  `fn <Function>` The method to attach
  `cont <String>` The container to act as a delegate, if no "sel" passed, the body is assumed as the container.
  `sel <String>` The selector to match in the event (optional)

Returns: `EventHandle`
  The Event handle returned from Y.delegate

#### focus

`Frame focus ( fn )`
Set the focus to the iframe

Parameters:
  `fn <Function>` Callback function to execute after focus happens

Chainable: This method is chainable.

#### getDocType

`static void getDocType ( )`
Parses document.doctype and generates a DocType to match the parent page, if supported. For IE8, it grabs document.all[0].nodeValue and uses that. For IE < 8, it falls back to Frame.DOC_TYPE.

#### getInstance

`YUI getInstance ( )`
Get a reference to the internal YUI instance.

Returns: `YUI`
  The internal YUI instance

#### hide

`Frame hide ( )`
Hide the iframe instance
Chainable: This method is chainable.

#### render

`Y.Frame render ( node )`
Render the iframe into the container config option or open the window.

Parameters:
  `node <String/HTMLElement/Node>` The node to render to

Chainable: This method is chainable.

#### show

`Frame show ( )`
Show the iframe instance
Chainable: This method is chainable.

#### use

`void use ( )`
This is a scoped version of the normal YUI.use method & is bound to this frame/window. At setup, the inst.use method is mapped to this method.

#### Methods inherited from EventTarget:

`_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, parseType, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrCfg, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from Plugin.Host:

`_destroyPlugins, _initPlugins, hasPlugin, plug, unplug`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString`

### Events

#### basehrefChange

`basehrefChange ( event )`
Fires when the value for the configuration attribute 'basehref' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### containerChange

`containerChange ( event )`
Fires when the value for the configuration attribute 'container' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### contentChange

`contentChange ( event )`
Fires when the value for the configuration attribute 'content' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### defaultblockChange

`defaultblockChange ( event )`
Fires when the value for the configuration attribute 'defaultblock' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### designModeChange

`designModeChange ( event )`
Fires when the value for the configuration attribute 'designMode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### dirChange

`dirChange ( event )`
Fires when the value for the configuration attribute 'dir' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### extracssChange

`extracssChange ( event )`
Fires when the value for the configuration attribute 'extracss' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### hostChange

`hostChange ( event )`
Fires when the value for the configuration attribute 'host' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### idChange

`idChange ( event )`
Fires when the value for the configuration attribute 'id' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### langChange

`langChange ( event )`
Fires when the value for the configuration attribute 'lang' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### linkedcssChange

`linkedcssChange ( event )`
Fires when the value for the configuration attribute 'linkedcss' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### nodeChange

`nodeChange ( event )`
Fires when the value for the configuration attribute 'node' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### srcChange

`srcChange ( event )`
Fires when the value for the configuration attribute 'src' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### titleChange

`titleChange ( event )`
Fires when the value for the configuration attribute 'title' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### useChange

`useChange ( event )`
Fires when the value for the configuration attribute 'use' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

### Configuration Attributes

#### basehref `- String`

The base href to use in the iframe.

#### container `- String/HTMLElement/Node`

The container to append the iFrame to on render.

#### content `- String`

The string to inject into the body of the new frame/window.

#### defaultblock `- String`

The default tag to use for block level items, defaults to: p

#### designMode `- writeonce Boolean`

Should designMode be turned on after creation.

#### dir `- String`

The default text direction for this new frame. Default: ltr

#### extracss `- String`

A string of CSS to add to the Head of the Editor

#### host `- Object`

A reference to the Editor instance

#### id `- writeonce String`

Set the id of the new Node. (optional)

#### lang `- String`

The default language. Default: en-US

#### linkedcss `- String`

An array of url's to external linked style sheets

#### node `- Node`

The Node instance of the iframe.

#### src `- String`

The src of the iframe/window. Defaults to javascript:;

#### title `- String`

The title to give the blank page.

#### use `- writeonce Array`

Array of modules to include in the scoped YUI instance at render time. Default: ['none', 'selector-css2']

#### Configuration attributes inherited from Base:

`destroyed initialized`

Copyright © 2011 Yahoo! Inc. All rights reserved.