How can I encapsulate third-party JavaScript files so that they do not pollute the global area?

Question

One of my clients asks if they can add JavaScript to track user behavior on their website. At first glance, I’m afraid that this will affect other third-party analytic scripts on the site, because it seems that both sides used the same JavaScript compressor. I do not want to comb and look for any possible collision of names like this.,.

Is there a way to include third-party scripts (script files that live in a separate domain), but wrap them in their own namespace or provide them with their own scope so that they do not interfere with other globally declared variables and functions?

Answer 1

This should not be a problem. Javascript compressors do not rename global variables (for obvious reasons), and any well-designed script will not expose many (any) global variables. If they want you to post it on their page, their responsibility is to prevent collisions.

Answer 2

In isolation order:

• Frame (i) hosted in another domain - no direct interactions
• Frame (i) located in one domain - interaction is possible only through explicit window / frame links
• Self-signed anonymous function - interactions are simple, but well-executed code can be isolated
• No - I hope no one uses the same variable or function names

script, # 2. , document.write .

: # 2

page.html

<div>...Your content...</div>
<iframe src="tracker.html" 
    width="10" height="10" 
    style="position:absolute; top:-100px"></iframe>

tracker.html( )

<script src="http://example.com/tracker.js"></script>

, , , , tracker.html. script () iframe: "tracker.html? U = thispage.html". , javascript:

page.html()

<div>...Your content...</div>
<script>
    (function(){
        var iframe = document.createElement('iframe');
        iframe.src = 'tracker.html?u=' + escape(location.href);
        iframe.width = iframe.height = 1;
        iframe.style.position = 'absolute';
        iframe.style.top = '-100px';

        var nodes = document.getElementsByTagName('script');
        var s = nodes[nodes.length - 1];
        s.parentNode.insertBefore(iframe, s);

    })();
</script>

location.pathname, location.href( , ..), .

... script (StatCounter, Google Analytics ..) , . 1 2 .

Answer 3

:

(function() {
    // insert code here
})();

;)

Answer 4

, .

1) , .

.
...
script iframe.... , script

, , , :
script ajax ( -, ), JS- script (new Function('The content of the script');), ( eval... ). , , , , . , script. ?... .

, script . , , script, , script.

2) ,

-: . , , , ... .

, : . , ( ).

, , regExp... "new Something()"

var myArray = []; // not new Array();
var myRegExp = /^myRegExp$/; // not new RegExp('^myRegExp$');
var myString = 'myString'; // not new String('myString');

, Array . [], .

, , .

, . . . script , , , .

( ), " ". .

(function () {
    // Your code here
}());

" ". . "undefined", , , .

(function (window, alert, Array, undef) {
    // Your code here
    alert('I\'m safe here.');

    if([] instanceof Array) {
        alert('I\'ve got the real Array object');
    }

    if(window.jQuery === undef) {
        alert('jQuery not loaded');
    }

}(this, this.alert, this.Array));

, script . , , , , .