Question

我正在尝试从我的自定义js文件加载statcounter脚本。原始脚本如下所示：

<html>
<head>...</head>
<body>
...
<script type="text/javascript">
var sc_project=11111111;
var sc_invisible=1;
var sc_partition=11111111;
var sc_click_stat=1;
var sc_security="11111111";
</script><script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script>
...
</body></html>

代码似乎设置变量，然后加载计数器脚本，该脚本读取变量的值并完成其工作。我试图像这样调用计数器脚本：

// file: counters.js
function CounterFromStatCounter() {
  sc_project=11111111;
  sc_invisible=1;
  sc_partition=11111111;
  sc_click_stat=1;
  sc_security="11111111";

  var oHead = document.getElementsByTagName('HEAD').item(0);
  var oScript= document.createElement("script");
  oScript.type = "text/javascript";
  oScript.src="http://www.statcounter.com/counter/counter_xhtml.js";
  oHead.appendChild( oScript);
}

 // main page
<html>
<head>
...
<script type="text/javascript" src="counters.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
  CounterFromStatCounter();
</script>
...
</body></html>

代码似乎有效：引用statcounter脚本的脚本元素会出现在 head 部分，但不会记录任何访问 - 这意味着计数器脚本无法接收我脚本中设置的变量。

我做错了什么？

Answer 1

你做错了。

1）您可能尚未验证您的代码。转到http://jslint.com并验证您的JavaScript。

2）不要在您的HTML中编写JavaScript。这种趋势会强制所有代码位进入全局命名空间，这很可能会与任何其他JavaScript代码产生冲突。

3）仅在关闭正文标记之前直接引用外部JavaScript文件。脚本解释阻止IE中的并行下载。

完成这三项，然后再回来寻求更多帮助。

Answer 2

定义变量globaly并写下一些js，如下所示。

window.attachEvent('onload', function() {
   document.write('<script type=text\/javascript src=blabla.com\/counter.js><\/sc' + 'ript>');
});

这应该适用于IE。对于其他其他浏览器，实现addEventListener ...

Answer 3

var CounterFromStatCounter = function () {
    var sc_project = 11111111,
    sc_invisible = 1,
    sc_partition = 11111111,
    sc_click_stat = 1,
    sc_security = "11111111",
    oHead = document.getElementsByTagName('head').item(0),
    oScript= document.createElement("script");
    oScript.setAttribute("type", "text/javascript");
    oScript.setAttribute("src", "http://www.statcounter.com/counter/counter_xhtml.js");
    oHead.appendChild(oScript);
}

我已经仔细研究了上面的代码，这是我的想法：

1）这就是代码在美化后的外观，并在函数中简化为单个var命令，没有任何隐含的全局变量，除了函数名本身。

2）每次页面加载每个用户时，都会销毁客户端代码中动态创建的内容。因此，您可能不希望使用JavaScript编写输出作为提供数据参考点的任何方法。我建议在服务器端完全执行此操作以提高效率。如果必须使用JavaScript，则需要写入一些中间数据存储，例如使用xmlHttpRequest对象连接到的JSON文件。

3）由于浏览器之间对DOM的不同解释，我不建议从客户端动态地向文档的头部写任何内容，并且一旦加载了头部，浏览器就没有理由再次读取它信息。

4）最有效的脚本应该是在关闭正文标记之前引用的外部文件，因为脚本解释会阻止IE中的并行下载。因此，将脚本放在头部会导致IE中的页面加载速度显着降低。

5）我将“HEAD”改为“head”，因为JavaScript和XHTML都是区分大小写的。

6）我还改变了将属性附加到动态创建的脚本标记以使用DOM方法的方式。我不知道这是否是更正确的方法，但它肯定更符合标准。

加载javascript计数器脚本的替代方法

3 个答案: