In the following code, what would you see in the alert dialog when you click on click here?
<script>
URL = 'hello' ;
document.write(URL) ;
</script>
<div onclick="alert(URL)">click here</div>
Fiddle
I was so sure the answer would be "hello" that I did not even care to try it.
But what I actually see is the url of the current page (tested on Chrome, Firefox and IE9).
Why is this URL
varaible defined inside inline event handlers?
Why does it take precedence over my own variable?
Where can I find documentation about this behaviour?
Follow-up
Is this meant to happen only inside inline event handlers?
What's the motivation for something like this?
Follow-up 2
I did more testing on old browsers and this behavior seems to be an trace from ancient times. I verified it on the following browsers:
Which means this URL variable is definately not the experimental window.URL
function/constructor. It is a string and it exist only inside inline event handlers.
The variable window.URL
(that is, the global variable URL
) is special. (Change your script to use another name, such as url
, and it will behave as you originally expected.) Some documentation about URL
can be found here. Note that browsers that do not support URL
will not behave in this unexpected way.
Well, the above was not quite right. There are two URL
variables in play here. When the script runs, it overwrites (or creates) window.URL
, which is then written to the document. (Note that your code wipes out window.URL
, so once your script runs, you no longer can do things like var n = new URL(...);
in browsers that supported that technology.)
On the other hand, when the <div>
is created, the onclick
handler attribute value is converted to the function:
function() {
alert(URL);
}
The important thing, which explains the behavior) is that the conversion from a string to a function is carried out in the context of document
. Thus the URL
in this function refers to document.URL
. (The document.URL
property is described here.) You can verify this by exercising the following:
<script>
URL = 'hello' ;
document.write(URL);
</script>
<div onclick="alert(URL === document.URL)">click here</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With