JS Object Browser

Dmytro Ivanchykhin

3.47/5 (8 votes)

Mar 13, 2007

CPOL

2 min read

41755

262

A JavaScript-based user interface for viewing and modifying objects on a web page.

Download source - 8.42 KB

Screenshot - jsobjbrowser.gif

Introduction

JSObjectBrowser is somewhat between a learning toy and a debugging or design tool. As follows from its name, it is a JavaScript script allowing to access (view and, where applicable, modify) objects on a web page.

JSObjectBrowser internals

There are two functions, eval() and typeof(), and a loop for()...in, essentially forming the core of JSObjectBrowser. This is enough to get the value of an object and the list of its child items. Try/catch blocks are used to provide proper error notifications.

Requests for object properties are processed in function jsobDispObjProp(strObj) where strObj represents an object of your interest:

function jsobDispObjProp(strObj)
{
    ...
    var ActObj=eval(strObj);
    ...
    for (var propName in ActObj)
    {
        // show properties

        ...
    }
    ...
}

If you specify something like "window.document", you will get a list of properties of that object. The user interface is based on a few HTML forms allowing you to type, select from a predefined list, or to browse in your research history. The final goal of all correspondent calls is to form a proper strObj to send it to jsobDispObjProp(strObj). For implementation details, please see the code itself; I tried to use "speaking" names wherever it was possible.

To expand the JSObjectBrowser capabilities, I've added a JavaScript expression evaluator (JScript Executor). This one provides a UI for the function eval(). Check the JScript Executor box for the Executor to appear, and enter a (sequence of) JavaScript commands. The main usage of this option is, surely, testing your scenario functions.

Using JSObjectBrowser

In the example supplied with this article, I've included two forms of JSObjectBrowser usage:

	Form	Entry point	All required files
1.	In-page: JSObjectBrowser is built in an (empty) page. This version (though fully functional) is intended mostly for getting started with the JSObjectBrowser.	objbrowsersimple.htm	objbrowsersimple.htm; objectbrowser.js
2.	In-frame: JSObjectBrowser is loaded to one pane of a frame while in the other pane any other page can be loaded.	inframejsob.htm	inframejsob.htm; objbrowserforframe.htm; objectbrowser.js; jsobhelpforframe.htm (as a placeholder)

The Index.htm file will help to go to the option of your choice.

If you want to add a JSObjectBrowser to an existent page, first, add the ObjectBrowser.js file containing the browser:

<script type="text/JavaScript" src="objectbrowser.js"></script>

Then, define the onLoad parameter of the <body>:

<body OnLoad=jsobInit()>

or call the function jsobInit() from the existent onLoad handler. This will add the browser to the bottom of your page. If you want to see it at any other location, add:

<div name="jsobObjectBrowser" id="jsobObjectBrowser"></div>

to a place of your choice.

To work with already existing pages, especially if they are stored remotely, use the in-frame version of JSObjectBrowser. For your convenience, the context of calls will be set to a loaded page pane rather than to the JSObjectBrowser pane itself. Further instructions will be given at the JSObjectBrowser start up.

Note that, in general, not all pages can be loaded in such a way (remember about the _blank attribute).

As security settings may prevent you from running scripts from your local storage (hard drive), you can access the in-frame version of JSObjectBrowser online here.