Question

我编写了以下JS

<html>
 <body>
   <img id="img" src="http://example.com/img.jpg" />
   <script type="text/javascript"> 
//<![CDATA[
(function(){
    img = document.getElementById("img");
    img.src = "http://example.com/img.png";
})();
  //]]>
</script> 
 </body>

但是在IE6上发生了一些js错误。

因为我应该使用var img吗？顺便说一下

     <body>
       <img id="img" src="http://example.com/img.jpg" />
       <script type="text/javascript"> 
    //<![CDATA[
    (function(){
        var img = document.getElementById("img");
        img.src = "http://example.com/img.png";
    })();
      //]]>
    </script> 
     </body>

</html>

没问题我无法理解为什么你能解释一下吗？

Answer 1

如果在声明变量时省略var，并且该变量在当前本地范围内不存在，则会发生以下两种情况之一：

您将声明一个新的“全局”变量，每个函数都可以访问该变量 - ＆gt;不要这样做
您将已存在的全局变量设置为新值;如果其他一些函数依赖于这个变量，你可能会造成严重破坏

因此，请尽量使用全局变量并使用var。正如Tomas已经指出的那样，您的脚本可以在浏览器加载结构之前运行。

Answer 2

在浏览器加载整个体结构之前，脚本正在运行。因此，您的函数找不到img元素。在onLoad body事件中调用您的函数将修复错误。

即：

<html>
 <head>

   <script type="text/javascript"> 
     //<![CDATA[
    function loadImage(){
      img = document.getElementById("img");
      img.src = "http://example.com/img.png";
      }
  //]]>
  </script>     

 </head>
 <body onLoad="loadImage();">
   <img id="img" src="http://example.com/img.jpg" />

 </body>
</html>

Answer 3

唯一的问题是您没有使用var来声明img变量。没有问题，身体的其余部分可能没有被解析，所以不要担心。

缺少var导致问题的原因是img与浏览器为您创建的全局对象的属性冲突。在IE中，具有ID的每个元素创建对应于该ID的全局对象的属性（因此可在任何地方访问）。此属性是只读的，因此如果您尝试分配给它，则会出现错误。如果你先声明它，你创建一个新的变量，它不会干扰IE的全局属性，它将按预期工作。

您还会发现更改变量名称不会与window的ID或属性发生冲突会解决问题：

banana = document.getElementById("img");
banana.src = "http://example.com/img.png";

...但这不是一个好主意，因为您使用banana自动污染全局范围，这可能会对其他代码产生影响，而在ECMAScript 5严格模式下，您会收到错误

最后，除非您使用的是XHTML（您几乎肯定不应该使用XHTML，并且您的示例没有XHTML doctype），否则不需要CDATA标记。你应该删除它。

故事的道德：始终声明您的变量。

为什么在IE6中出现JS错误（不是var变量）

3 个答案: