To mirror the content in the Spanish version of the blog, I’ll add this entry to the English version and continue to do this as a custom (I hope =). During the research of one of my cases, I had to analyse some Javascript/Jscript/ECMAscript (you name it) customer code which returned errors using Google Maps API. The research lead me to the invaluable resource of Rick Strahl’s Web Log and makes use of the new developer tools present in Internet Explorer 8.

Problem:

Certain methods of the code return the scripting error message “Object does not support the property of method”. This error only happens on Internet Explorer, and not in other browsers.

Research:

Analysing this customer code, I was able to determine that there were some variables implicitly declared as strings:

 

   1: variable = ' '

 

This code creates a variable of implicit string type. In another part of the code we can find this other declaration.

 

   1: <div id="variable"> </div>

The name collision this produces can confuse the own programmer, instead of exploiting the variant types of Javascript. This is not recommended, aside for the special treatment Internet Explorer gives to HTML objects as we’ll see below.

In the rest of the code we could find different operations applied to this very name variable in their aspects as a div element and also as a string variable.

Example 1:

   1: variable += 'Hola mundo';

Example 2:

   1: document.getElementById('variable').innerHTML = variable;

In this second example, the programmer tries to assign to the <div> element called variable of the DOM (in other browsers it’s only possible to access this variable in this way, more below) the contents of the string variable called the same way. This forces to the most the separation between the two namespaces (DOM objects and managed code scope). In this line the error was produced.

Cause:

The cause for this behaviour is that Internet Explorer creates global variables for each element of the DOM. It’s not necessary to check this to be able to access the source code of Internet Explorer or searching for internal workings documentation. Using Internet Explorer 8 new Developer Tools to parse the following HTML/Javascript page:

<html>   
<body>

<div id="variable"> </div>

<script type="text/javascript">
   1:    
   2: variable = ' ';   
   3: document.getElementById('variable').innerHTML = variable;   
</script>

</body>
</html>

This code raises the error mentioned in the line 2, when the programmer really wants to create a new string variable with the same name.

Div

We can see that Internet Explorer has created a “shortcut” to this DOM object using the type DispHTMLDivElement, creating this name collision. This facility for the programmer has the requirement of a proper naming convention on the part of the programmer.

I hope this post helps,

 

Álvar García