Writing forward-compatible websites

  • Revision slug: Web_development/Writing_forward-compatible_websites
  • Revision title: Writing forward-compatible websites
  • Revision id: 54545
  • Created:
  • Creator: Bzbarsky
  • Is current revision? No
  • Comment page created, 221 words added

Revision Content

This is a list of best practices for creating websites that do not break when browsers are updated.

Prefix all global variable access in event handler content attributes with window.

When an event handler content attribute (onclick, onmouseover, and so forth) is used on HTML element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window. For example, if you have this markup:

<div onclick="alert(ownerDocument)">Click me</div>

then clicking on the text will alert the ownerDocument of the div. This will happen even if there is a var ownerDocument declared in global scope.

What this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new DOM property to elements or documents. If that happens, then suddenly your function will stop being called. To avoid this, fully qualify global variable access, like so:

<script>
  function localName() {
    alert('Function localName has been called');
  }
</script>
<div onclick="window.localName()">Clicking me should show an alert<div>

Note that removing "window." in the example above completely changes the behavior in this case.

Revision Source

<p>This is a list of best practices for creating websites that do not break when browsers are updated.</p>
<h2>Prefix all global variable access in event handler content attributes with <code>window.</code></h2>
<p>When an event handler content attribute (<code>onclick</code>, <code>onmouseover</code>, and so forth) is used on HTML element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window. For example, if you have this markup:</p>
<pre>&lt;div onclick="alert(ownerDocument)"&gt;Click me&lt;/div&gt;</pre>
<p>then clicking on the text will alert the <code>ownerDocument</code> of the <code>div</code>. This will happen even if there is a <code>var ownerDocument</code> declared in global scope.</p>
<p>What this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new DOM property to elements or documents. If that happens, then suddenly your function will stop being called. To avoid this, fully qualify global variable access, like so:</p>
<pre>&lt;script&gt;
  function localName() {
    alert('Function localName has been called');
  }
&lt;/script&gt;
&lt;div onclick="window.localName()"&gt;Clicking me should show an alert&lt;div&gt;
</pre>
<p>Note that removing "<code>window.</code>" in the example above completely changes the behavior in this case.</p>
Revert to this revision