CODEWITHSUNDEEP
javascriptgoogle-chrome
James Kyburz
James Kyburz

Reputation: 14453

Is there a solution to unexpected global variable in chrome

I just found at the script tag id's in chrome are created are stored on the window object.

<script id="deploy" type="text/html">blah</script>

window.deploy = ➜ 

<script id="deploy" type="text/html">blah</script>

Object.keys(window) does not include "deploy"

Not a new issue apparently

So my question

Is there anyone who has found a solution to this (prevent chrome from polluting my world) the only thing I have come up with is the following:-

$('script[type="text/html"]').each ->
# stuff
delete window[@.getAttribute 'id']

My "solution" risks deleting a global variable when not in chrome.

However without my solution chrome can overwrite global variables if the script id clashes.

WHAT A MESS!

Any help appreciated!

Upvotes: 1

Views: 493

Answers (2)

Lucas Green
Lucas Green

Reputation: 3959

What I came up with:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script id="deploy" type="text/html">blah</script>
    <script type="text/javascript">
        $(function () {
            $('script[type="text/html"]').each(function (index, element) {
                var id = $(element).attr('id');

                console.log(element);
                console.log(window[id]);

                if (window[id] === element) {
                    window[id] = undefined;
                }

                console.log(window[id]);
            });
        });
    </script>
</head>
<body>

</body>
</html>

This checks to see if the global is the same as the node before it deletes it.

Note that this happens with each ID, not only script tags. And it shouldn't be polluting your global scope, as Yoshi said, but the above solution should work for you.

Upvotes: 1

Yoshi
Yoshi

Reputation: 54649

If you name an element in your HTML document using the id attribute, and if the Window object does not already have a property by that name, the Window object is given a nonenumerable property whose name is the value of the id attribute and whose value is the HTMLElement object that represents that document element.

(emphasize by me)

Source: JavaScript: The Definitive Guide, 6th Edition

Upvotes: 4

Related Questions