body标签onLoad执行无效，为何？

2018-03-24 本文已影响2人亨利何

Example: 

<html>

// your code right here
...
...
<body onLoad="init()">

// your code right here
...
...
</body>
<html>

[导读]

HTML页面中直接使用onLoad()来绑定方法，保证：

页面元素加载完成后才开始执行方法，避免selector获得的元素为null

但是，页面运行效果在chrome中显示正常，没有出错，但页面上传至服务器后再访问，页面显示为空，没有出现该出现的元素，为何为出现这种情况？

[关键词]

onLoad, 页面资源加载，浏览器兼容性

[提问]

明明本地chrome测试正常无误，服务器上传后访问失效
Javascript新的语法支持与浏览器兼容性

[正文]

1. Bug分析

页面元素没有出现，问题归结到onload函数，没有正确执行。而onload正确执行的前提是页面元素全部加载完成后才会执行，而且：

页面从上至下加载，直到onload处，这之间都有可能

Jianshu.png

2. Bug排查

服务端
- 检查服务器上资源，发现包括图片在内的都是静态资源，没有网络请求。
- ajax的获取接口没有异常
客户端
打印log，客户端代码排查发现有一个函数的执行不正常，虽然进入函数内部执行，不过遇到了这个
```
function example () {
     for (let i = 0; i < arr.length; i++) { // Ⅰ
          // code here
          var _id = `item${arr[index].id}` // Ⅱ
          // code here
     }
}
```
发现两处I, II在加载是挡住了（没有执行）
- I. 用for循环中使用了let声明变量
- II. 使用了模板字符串
结论

ES6的语法不支持

3. Bug解决

变量声明使用var，模板字符串使用字符串拼接代替

function example () {
     for (var i = 0; i < arr.length; i++) { // Ⅰ
          // code here
          var _id = 'item' +  arr[index].id // Ⅱ
          // code here
     }
}

再次上传服务器，正常

浏览器的兼容性问题我经常只会考虑到css，没有考虑到js这一层语法是否支持，受教了

END