Named access on the Window object in Safari

in  JavaScript

This week we noticed that the user administration of our time tracking app timr behaved different on Safari.

I debugged into that issue and found out that a condition in JavaScript behaved different than in other browsers:

if (assignedGroupTable) {

The variable assignedGroupTable was defined some lines before with

var assignedGroupTable;

and the condition should be false on the first call of that function, but in Safari it was true. The debugger showed that the value of assignedGroupTable seemed to be a DIV - there was a DIV in the page with an ID assignedGroupTable, but it had never been assigned to that variable. It seemed like Safari automatically assigned the DIV, with the ID, that was equal to the variable name, to the variable.

After a quick search, I came to this article about DOM Element References as Global Variables and I was really surprised, about what I read there. It seems like all modern browser implement the Named access on the Window object, which allows you to access elements via the ID or NAME attribute, simply by using it like a variable in JavaScript.

So why did our code behave different in Safari? I adapted the example the article uses to find the difference in the behaviour of Safari.

<html>
 <head></head>
 <body> 
  <button id="bar">Button</button>
  <script>
   console.log(bar);
  </script>
 </body>
</html>

On modern browsers (Chrome 29, Safari 6, Firefox 22, IE 10) this logs the button element to the console. But when making a small change the browsers behave different:

<html>
 <head></head>
 <body> 
  <button id="bar">Button</button>
  <script>
   var bar;
   console.log(bar);
  </script>
 </body>
</html>

In Chrome, Firefox and IE this logs undefined to the console, only Safari still logs the button element!

There were two ways to fix our problem:

  1. rename the ID of the DIV or the variable so that they differ
  2. define the variable in the JavaScript with var assignedGroupTable = null; setting the value explicitly to null

Wo decided to do the second because it required fewer changes.