IE7 and IE8 naming and scoping conflict

I found these lines in some code I was maintaining, which was failing in ie 7 and 8. Stepping through the constructor, I could see that all the code was executing properly. However, when the constructor returned, I got an "Object does not support this property or method" error. WTF?

One important thing to note is that the variable embedDialog has global scope (I know globals are evil, but I didn't write this code).

// Results in "Object does not support this property or method in ie8 and ie7
embedDialog = new Dialog({
    id: "embedDialog",
    width: 400,
    height: 400,
    message: "Check it out",
    title: 'Cool dialog box'
});

If I give embedDialog functional scope, then voila it works:

// Eliminate global scope and it works
var embedDialog = new Dialog({
    id: "embedDialog",
    width: 400,
    height: 400,
    message: "Check it out",
    title: 'Cool dialog box'
});

The other way to fix it is to change the value of the id property to something other than the name of the variable, like so:

// Change "embedDialog" to "embedDialogBox" and voila it works
embedDialog = new Dialog({
    id: "embedDialogBox",
    width: 400,
    height: 400,
    message: "Check it out",
    title: 'Cool dialog box'
});

What the hell is wrong with IE? Can anyone explain why the original code breaks IE 7/8开发者_开发百科?

If the "Dialog()" constructor function makes a DOM element with that "id" value (same as the global variable), then IE makes a global symbol with that name (colliding with your variable, obviously) and makes it refer to the DOM element. Your code probably expects it to be a "Dialog" instance.