简体   繁体   English

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

[英]Why JS Error IN IE6 (not var variables)

I coded the following JS 我编码了以下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>

but on IE6 some js errors are occured. 但在IE6上却发生了一些js错误。

Because Should I use var img? 因为我应该使用var img吗? incidentally 偶然

     <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>

is no problem I can't get the reason why Could you explain me? 没问题,我不明白你为什么能解释我?

If you omit var when you're declaring a variable, and that variable doesn't exist in current local scope, one of two things will happen: 如果在声明变量时省略var ,并且该变量在当前本地范围中不存在,则会发生以下两种情况之一:

  1. you'll declare a new "global" variable, to which every function will have access to -> don't do this 您将声明一个新的“全局”变量,每个函数都可以访问->请勿执行此操作
  2. you'll set an already existing global variable to a new value; 您将已经存在的全局变量设置为新值; if some other function relies on this variable, you could wreak havoc 如果其他函数依赖此变量,则可能造成严重破坏

So, don't use global variables and use var whenever possible. 因此,请勿使用全局变量,并尽可能使用var As Tomas already pointed out, your script could be run before the structure is loaded by the browser. 正如Tomas已经指出的那样,您的脚本可以在浏览器加载结构之前运行。

The script is running before the whole body structure is loaded by the browser. 该脚本在浏览器加载整个主体结构之前运行。 So, your function can't find the img element. 因此,您的函数找不到img元素。 Invoking your function at the onLoad body event would fix the error. onLoad主体事件上调用您的函数将解决此错误。

Ie: 即:

<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>

The only problem is that you're not using var to declare the img variable. 唯一的问题是您没有使用var声明img变量。 There is no problem with the fact that the rest of the body may not have been parsed, so don't worry about that. 身体的其余部分可能没有被解析这一事实没有问题,因此不必担心。

The reason that the absence of var is causing a problem here is that img is colliding with property of the global object created for you by the browser. 缺少var会在这里引起问题的原因是img正在与浏览器为您创建的全局对象的属性发生冲突。 In IE, each element with an ID creates a property of the global object (which is therefore accessible everywhere) corresponding to that ID. 在IE中,每个具有ID的元素都会创建与该ID相对应的全局对象的属性(因此可以在任何地方访问)。 This property is read-only, so if you try and assign to it, you get an error. 此属性是只读的,因此,如果尝试为其分配,则会收到错误消息。 If you declare it first, you create a new variable which doesn't interfere with IE's global property and it will work as you expect. 如果先声明它,则将创建一个不会干扰IE全局属性的新变量,它将按预期工作。

You would also find that changing the variable name not to collide with an ID or property of window would fix the problem: 您还会发现,更改变量名称以使其与window的ID或属性不冲突将解决此问题:

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

... but this is not a good idea either since you're automatically polluting the global scope with your banana , which could have consequences in other code, and in ECMAScript 5 strict mode you would get an error. ...但这不是一个好主意,因为您会自动用banana污染全局范围,这可能会对其他代码产生影响,而在ECMAScript 5严格模式下,您会得到一个错误。

Finally, unless you're using XHTML (which you almost certainly shouldn't be and your example doesn't have an XHTML doctype), there's no need for the CDATA mark-up. 最后,除非您使用XHTML(几乎可以肯定不应该使用XHTML,并且您的示例没有XHTML文档类型),否则不需要CDATA标记。 You should remove it. 您应该将其删除。

Moral of the story: always declare your variables . 故事的寓意: 始终声明您的变量

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM