javascript - 如何封装第三方 JavaScript 文件，以免它们污染全局范围？

Question

我的一位客户询问他们是否可以添加一些 JavaScript 来跟踪用户对其网站的行为。乍一看，我担心它会干扰网站上的其他第三方分析脚本，因为看起来双方都使用了相同的 JavaScript 压缩器。我不想梳理和搜索所有可能的命名冲突，所以。 . .

有没有一种方法可以包含第三方脚本(位于单独域中的脚本文件)，但将它们包装在自己的命名空间中或给它们自己的范围，这样它们就不会与其他全局声明的变量和函数发生冲突？

Answer 1

隔离顺序:

1. 托管在不同域上的 (i) 框架 - 无法进行直接交互
2. 托管在同一域上的 (i) 框架 - 只能通过明确的窗口/框架引用进行交互
3. 一个自执行的匿名函数 - 交互很简单，但可以隔离行为良好的代码
4. 无 - 希望没有人使用相同的变量或函数名称

这取决于第三方脚本，但我通常倾向于#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。对于跟踪脚本，我建议在 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(具有协议(protocol)、域等)。

毕竟...如果跟踪脚本来自信誉良好的来源(StatCounter、Google Analytics 等)，我建议相信他们不会踩到您的页面变量和函数。选项 1 和 2 实际上适用于低信任度的情况。