NOTE : The <OBJECT> element is currently only supported by Internet Explorer (although Mosaic now has limited <OBJECT> insertion capabilities). The object insertion mechanism is the subject of a W3C Working draft available at http://www.w3.org/pub/WWW/TR/WD-object.html. For this and other W3C working drafts, you should visit the W3C site at http://www.w3.org/pub/WWW/TR/
The <OBJECT> element provides a way for the ActiveX controls and other media to be embedded directly into HTML documents. It subsumes the role of the <IMG> element, providing an insertion mechanism for media other than static images. As far as the Internet Explorer is concerned, the <OBJECT> element can be used for the inclusion of ActiveX OLE controls.
An example of the syntax is as follows:
|
(The above example inserts the 'label' ActiveX control to the left of the example text. NOTE : Netscape will not display the 'label')
The object being inserted into the HTML document in this case, is referred to by its CLASSID. This is a unique identifier for the 'label' control, according to the Component Object Model "class id" URL scheme. The ID attribute identifies the specific label with a unique name, allowing interaction with and dynamic updating of the object's properties via active OLE scripting (i.e. Visual Basic Script). The TYPE attribute (if used) should specify the MIME type for the object (for ActiveX controls, this is application/x-ole-object)
Where the ActiveX control that is to be inserted may not be present on the users system, the automatic download mechanism of ActiveX controls (using the CODEBASE attribute) can be employed. This attribute can be used to provide a location from which the control will be downloaded.
For example :
<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE=http://www.mysite.com/controls/mycontrol.ocx
ID=lbl1
WIDTH=90
...
would look within the system registry to see if the control with the given CLASSID is present on the system and if not, the control will be retrieved from the URL given by the CODEBASE attribute. Full version checking can also be employed using this mechanism.
For example :
<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE=http://www.mysite.com/controls/mycontrol.ocx#ver=3,10,0,1000"
ID=lbl1
WIDTH=90
...
would only download the control to the users system if the version present on the system is older than that given by the #ver setting. I.e. if it is older than version 3.10.0.1000.
Some objects will require certain code to implement the object. This should be referenced by using the CODE attribute. Also, the DATA attribute can be used to point to a persistent data stream to initialise the object's state. The use of the above attributes is control dependant, so exhaustive examples cannot be given.
In keeping with the role of the <OBJECT> element as a media insertion element (c.f. <IMG>) various standard formatting attributes, such as ALIGN, HEIGHT, WIDTH, ALIGN, BORDER, HSPACE, VSPACE, NAME etc. can also be used to define the positioning of the object on the page.
Other attributes supported by the <OBJECT> element are:
ACCESSKEY
The ACCESSKEY attribute can be used to specify a shortcut key for the <OBJECT> (activated by pressing 'Alt' and the ACCESSKEY together - like standard Windows applications menu shortcuts). The ACCESSKEY setting does not have to be a character contained in the <OBJECT>, which is not modified in any way to reflect that an ACCESSKEY has been defined.
STANDBY="Information"
The STANDBY attribute can be used to present the user with some text, alongside the small graphic present when an ActiveX control is not yet downloaded. It's similar to the ALT text for the <IMG> element. If the user already has the control installed, then the STANDBY text won't be seen.
TABINDEX
The TABINDEX attribute can be used to set a tabbing order for the user to navigate around the document. For example, if <OBJECT> elements have TABINDEX properties set, when the user is focused on an object, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX property.
TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE attribute is used for informational purposes. If present, the value of the TITLE attribute is presented as a ToolTip when the users mouse hovers over the <OBJECT> section.
LANG="language setting"
The LANG attribute can be used to specify what language the <OBJECT> element is using. It accepts any valid ISO standard language abbreviation (for example "en" for English, "de" for German etc.) For more details, see the Document Localisation section for more details.
LANGUAGE="Scripting language"
The LANGUAGE attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <OBJECT> element. It can accept values of vbscript, vbs, javascript or jscript. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE attribute is set.
CLASS="Style Sheet class name"
The CLASS attribute is used to specify the <OBJECT> element as using a particular style sheet class. See the Style Sheets topic for details.
STYLE="In line style setting"
As well as using previously defined style sheet settings, the <OBJECT> element can have in-line stylings attached to it. See the Style Sheets topic for details.
ID="Unique element identifier"
The ID attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <OBJECT> element for scripting purposes. Any <OBJECT> element with an ID attribute can be directly manipulated in script by referencing its ID attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
DATAFLD="Column Name"
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <OBJECT> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic. Data binding for the <OBJECT> element is supported on the objects default property/value and the contents of the data source column referenced should be data suitable for defining <OBJECT> properties.
DATASRC="Data Source"
The DATASRC attribute can be used to specify a data source that the <OBJECT> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.
The <PARAM> element allows a list of named property values (used to initialise an OLE control, plug-in module or Java applet) to be represented as a sequence of <PARAM> elements. Note that <PARAM> is an empty element and should appear without an end tag. The NAME attribute defines the property to be defined and the VALUE attribute defines the property value. For instance, in the above example, the line:
<PARAM NAME="caption" VALUE="Hello there">
sets the value of the property 'Caption' to be "Hello there" (In this case, this property represents the text that will be displayed for the label.) Object properties are entirely control dependant, so the reference documentation for any control should be read to find out what properties can be set using the PARAM element.
The <PARAM> element also supports the following attributes:
DATAFLD
The DATAFLD attribute can be used to specify a data column name from the Data source (see DATASRC) that the <PARAM> is bound to. For more information on the DATAFLD attribute, see the Data Binding topic.
DATAFORMATAS
When the <PARAM> element is data-bound, it can accept straight text, or HTML from the data source. The DATAFORMATAS attribute should be set to "TEXT" or "HTML" accordingly. with DATAFORMATAS="HTML", the data provided for the <BUTTON> element is parsed and rendered when it's displayed.
For more information on the DATAFORMATAS attribute, see the Data Binding topic.
DATASRC
The DATASRC attribute can be used to specify a data source that the <PARAM> is bound to. For more information on the DATASRC attribute, see the Data Binding topic.
NAME
The NAME attribute is used to specify which property of the specific attribute is being set, by the value of the VALUE attribute.
VALUE
Specifies the value of the property named in the NAME attribute.
Microsoft has released the ActiveX Control Pad, a text editor with added <OBJECT> insertion capabilities. Using this, authoring HTML documents that contain ActiveX components is a breeze, as control insertion/property setting is done through a Visual Basic like forms interface (the ActiveX Control Pad has been jokingly referred to as Visual Notepad). The Control Pad also allows authoring of fixed-layout sections, viewable using the ActiveX HTML Layout Control (available from Microsoft). This allows for presentation of fixed content, where the content will display as authored (something which can't be guaranteed with normal HTML). Users interested in authoring 'Activated' HTML documents, should download the ActiveX Control Pad from the Microsoft Web site at http://www.microsoft.com/workshop/author/cpad/. Also, more and more third-party application vendors are starting to supply HTML editors/Web development packages that support the visual inclusion of ActiveX controls.
Every <OBJECT> element in a document is an object that can be manipulated through scripting. Note that scripting of the <OBJECT> element/object is only supported by Internet Explorer 4.0, as only Internet Explorer supports the <OBJECT> element.
<OBJECT...> Properties
The <OBJECT...> element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
As well as those properties, the <OBJECT> element supports the following properties, all of which directly reflect their respective attribute setting (see above).
accessKey, align, classId, code, codeBase, data, dataFld, dataSrc, name, standBy, tabIndex, title, type and width.
The readyState property can be one of 4 values, depending on the current state of the object referenced in the <OBJECT> element. The possible values of the readyState property are:
| Value | Meaning |
complete |
The resource has completely loaded and is available to the document and therefore manipulation. |
interactive |
The resource hasn't completely downloaded, but is available to the document and scripting |
loading |
The resource is being downloaded |
uninitialized |
The resource is not available - normally, this value indicates that the resource is downloading |
Note that the readystate property is read-only.
<OBJECT...> Methods
The <OBJECT...> element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
The <OBJECT> element also supports the following methods:
blur
The blur method can be used to force the applet to lose the users focus. This then fires the onblur event (see below).
focus
The focus method can be used to force the applet to gain the users focus. This then fires the onfocus event (see below).
<OBJECT...> Events
The <OBJECT...> element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The <OBJECT> element also supports the following events:
onafterupdate
The onafterupdate event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate event has fired and was successful. For more information on Data Binding, see the Data Binding topic.
onbeforeupdate
onbeforeupdate fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate is a cancelable event (setting returnValue=false for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.
onblur
onblur is fired whenever the users focus moves away from the applet (either by them clicking on another part of the document, or by 'tabbing' away from the contents of the <APPLET> element, or by using the blur method (see above).
ondataavailable
The ondataavailable event being fired indicates that more records for the referenced Data Source Object are available. It doesn't necessarily fire for every single additional record though. For more information on Data Binding, see the Data Binding topic.
ondatasetchanged
The ondatasetchanged event is fired when a new set of data is available and a recordset can be retrieved from that set of data, or when an existing set of data has been changed - for example after a filter has been applied to the data. For more information on Data Binding, see the Data Binding topic.
ondatasetcomplete
When all the data in the referenced recordset is available, the ondatdasetcomplete event fires. For the ondatasetcomplete event, a reason parameter is available through the Event Object, which can have values of 0, 1 or 2, corresponding to successful completion, Aborted completion (i.e. 'Stop' button pressed for example), or Error (some other error) respectively. For more information on Data Binding, see the Data Binding topic.
onerror
The onerror event is fired when an error occurs attempting to load the referenced <OBJECT> element. Note that error messages can be suppressed by setting objectreference.onerror="null".
onerrorupdate
The onerrorupdate event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.
onfocus
The onfocus event is fired whenever the user passes the focus to the applet - by clicking on it, tabbing to it, or by a script function using the focus method (see above).
onload
The onload event is fired when the object referenced in the <OBJECT> element starts to download. Note that the event is fired as soon as the <OBJECT> element is encountered, so any script functions fired from the onload event should be before the referenced <OBJECT> element in the document, otherwise script errors will occur.
onreadystatechange
At any time, the resource may change its readyState property and when this happens, the onreadystatechange event is fired.
onresize
The onresize event is fired whenever the applet is resized, through scripting, or by the user changing their browser window size.
onrowenter
The onrowenter event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit event has been fired. For more information on Data Binding, see the Data Binding topic.
onrowexit
The onrowexit event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the anafterupdate and onbeforeupdate events, onrowexit is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update events). onrowexit will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.
© 1995-1998, Stephen Le Hunte
Questions:
http://www.lance-safety.com Nice tutorial, but do you know how to connect to events that are specific to the particular ActiveX control. For example, I'm using an MS Date/time picker within an HTML page, and I want to handle the OnChange event of the DT picker in JScript. But I don't know how...? Can you help me, please?
Peter Laman,
Lance Group, The Netherlands