javascript 摘记一

　2010-10-19 08:56:00　来源：WEB开发网　　　

核心提示： 曾经有一段经历，在写多国语言版网页时，javascript 摘记一(2)，防止html乱码,因此在 meta 中设置为utf-8.本人有一个习惯，喜欢在记事本中编写脚本.结果js的中文部份均为乱码. 原因是:记事本编码默认为系统代码页(gb2312),而网页中指定了utf-8解码.解决办法:使用其它文本编辑器，然后注

　　曾经有一段经历，在写多国语言版网页时，防止html乱码,因此在 meta 中设置为utf-8.本人有一个习惯，喜欢在记事本中编写脚本.结果js的中文部份均为乱码. 原因是:记事本编码默认为系统代码页(gb2312),而网页中指定了utf-8解码.

解决办法:使用其它文本编辑器，将文件编码格式转为utf-8。
7.如何理解onload 事件. 假设如下场景:

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 </head>
 <body>
  <div style = "width:100px; height:120px">
   <img src = "aa.jpg" id = 'img' />
  </div>
 </body>
 </html>

现要求 img 通过脚本缩放. 已知图片缩放的逻辑写在imageauto.js文件中。
常规分析:
1. img 的缩放逻辑写在 img 的onload事件中.
2. 先通过脚本获得img 对象，然后注册onload事件.
3. 获得对象元素应该在文档加载完毕时进行，也就时 body 的 onload 事件中进行.
所以代码这样写:

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 <script>
  window.onload = function(){
   document.getElementById("img").onload = function(){
    //调用 imageauto.js 缩放图片
   }
  }
 </script>
 </head>
 <body>
  <div style = "width:100px; height:120px">
   <img src = "aa.jpg" id = 'img' />
  </div>
 </body>
 </html>

如上 img 中的onload 不会执行. 因为文档加载完毕，意味着 img 已经加载完毕。因此 img 的onload 事件生命周期已经过了.
所以只能将如上js放到尾部,但仍无法确定 imageauto.js 是否加载完毕. 因此存在调用imageauto.js 失败的风险.

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 </head>
 <body>
  <div style = "width:100px; height:120px">
   <img src = "aa.jpg" id = 'img' />
  </div>
 </body>
 </html>

 <script>
 document.getElementById("img").onload = function(){
    //调用 imageauto.js 缩放图片
   }
 </script>

仔细分析加载顺序,安全的加载的顺序如下
window.onload
-> imageauto.js
-> img (onload 失效)

因此产生如下关系:
imageauto.js 依赖 window.onload 事件
img.onload 依赖 imageauto.js
img.onload 排斥 window.onload 事件.
解决办法:利用脚本创建img,如:

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 <script>
  window.onload = function(){
    var img = document.createElement("img") ;
   img.src = "aa.jpg" ;
   img.onload = function()
   {
    //调用 imageauto.js 缩放图片 
   } ;
   document.getElementById("div1").appendChild(img) ;
  }
 </script>
 </head>
 <body>
  <div style = "width:100px; height:120px" id = "div1">
   <!--<img src = "aa.jpg" id = 'img' />-->
  </div>
 </body>
 </html>

上一页 1 2