Do's and Don'ts

This document contains a collection of topics that will help you better understand the scope of support

JavaScript Language Semantics

Most JavaScript semantics are supported. Most of the finer details of the language will function including full support for extending the native prototypes in isolation. Any extensions you add to the native objects will only be available to your code. Any extensions the host has added to the native objects will be hidden from your code unless explicitly added by the host to the object’s rule.

Assignment of native prototypes:

Shadowing of native APIs

Constructs and Semantics

Below highlights a few constraints enforced by the Sandbox:

With Statement

The JavaScript with statement is used to interject a new object in the scope chain for member look-up. We plan to add support for the with statement. However, in general you should avoid it as it will incur a performance penalty.

CSS Expressions

CSS Expressions are an Internet Explorer-specific feature that is not support by the Sandbox.

CSS IE Filters

IE Filters are not supported. If opacity support is desired, use the W3C standard Opacity property. The Sandbox will ensure it is applied property.

Document.Write Support

The Sandbox support for document.write is currently incomplete and buggy. Our intent is to support document.write for injecting HTML content. However, that content must not attempt to write script into the page or a security exception will occur. Once completed, document.write will fully support the dynamic injection of HTML fragments.

Well-Structured Document Requirements

The HTML parser that performs the initial transformation is currently very strict. In general, your HTML must always be well-formed and all container elements must have their closing tag specified; even if HTML considers the closing tag optional. For example:

Paragraph 1
Paragraph 2

Will be rejected by the parser and instead must be written as:

Paragraph 1
Paragraph 2

The standard set of empty elements (IMG elements, etc) can be specified either with or without the closing slash. For example, both of the following are acceptable:

HTML Support

Most standard HTML elements are supported with the following exceptions.

The OBJECT (and APPLET/ EMBED equivalents) are currently prohibited. We have plans to introduce Silverlight and Flash support in the future.

IFrame is currently not yet supported although we have plans to enable it with proper cross-domain protections.

We currently do not expose all HEAD elements via the DOM. This will be enabled in the future.

Focusing on Standards

Our goal is to enable code written against the Sandbox to execute against all modern browsers. Our focus is on supporting W3C standards (plus a few APIs that should make good standards candidates). You should be able to use these APIs even if the target browser does not provide native support. Hopefully, you should be able to avoid browser detection and browser-specific APIs when coding in the Sandbox. Below are a few highlights:

W3C Event Model

We recommend developing against the W3C event model for your event handlers. This includes using the add/remove EventHandlers API. Currently, pre-capture is not yet supported. In addition, the event argument is provided as the first argument to all event handlers.

Computed Style

For accessing the style of elements, you can use the standards API getComputedStyle(element, null).getPropertyValue(property)

Below illustrates both the W3C event model and computed styles:

<html>
    <head>
        <title>W3C Event and CSS Model</title>
        <link href="http://www.websandbox.org/Images/favicon.ico" rel="icon" />
        <style>
            body {color: black}
            p {margin:0px 3px}
            p.first {color: red; font-style:normal}
            p.second {color: navy; font-style: italic}
        </style>
    </head>
    <body>
        <p class="first">Click first on this paragraph to see the calculated styles</p>
        <p class="second">Then click on this paragraph</p>
        <script>
            function doClick(ev) // 
            {
                // ev : The event object

                // Get the computed style object for the clicked element
                var cs = getComputedStyle(ev.target,null);

                // Display the CSS properties
                alert("Clicked on: " + ev.target.tagName + "\nColor: " + cs.getPropertyValue("color") + "\n" + "Font-Style: " + cs.getPropertyValue("font-style")) 
            }
            document.body.addEventListener("click",doClick,false);

        </script>
    </body>
</html>

Non-Standard but Useful

While these are not officially apart of the standard, we took a few liberties with the underlying APIs and chose to expose a few very useful APIs. We chose these because we discovered many libraries exposing similar functionality. Again, these APIs are enabled in all browsers.

onmousenter/onmouseleave events

These two events are supported natively by IE and are a very useful and simple solution to enabling hover effects. These events do not bubble and only fire when the mouse enters and leaves the element compared to the onmouseover and onmouseout events which fire and bubble over every node you traverse.

See the MSDN documentation for more information.

Contains method

The contains method is useful for quickly determining whether an element is a descendent of another. See the MSDN documentation for more details.

attachEvent/detachEvent

While we recommend using the W3C standard approach to event handlers, we also enabled IE’s attach/detachEvent APIs.

Overview

Using the Sandbox

Hosting the Sandbox

The Architecture

Road Trips

Community Forums