html onload不起作用,body标签onLoad执行无效，为何？

Example:

// your code right here

...

// your code right here

...

[导读]

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

html onload不起作用,body标签onLoad执行无效，为何？相关推荐

Js 加载事件（onload）可以作用的标签
2019独角兽企业重金招聘Python工程师标准>>> onload事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在& ...
类选择器和所作用的标签一起写为什么不起作用？ - CSDN博客
原文:类选择器和所作用的标签一起写为什么不起作用? - CSDN博客 HTML代码: css样式: 这不是将样式作用于circle类下的有current类的li标签吗?为什么不起作用? 原因: 选择器 ...
织梦channel标签currentstyle样式无效不起作用
我们在用织梦系统制作网站时,经常会用到channel标签来调子栏目.但是,很多朋友会遇到这种情况在使用channel标签来调子栏目的时候,指定 "type=son typeid=x" ...
nofollow标签的作用 nofollow标签添加方法
这篇文章主要介绍了nofollow标签的作用 nofollow标签添加方法,需要的朋友可以参考下 nofollow标签的作用 nofollow标签添加方法模拟搜狗蜘蛛 nofollow标签是s ...
html em标签的作用,htmlem标签的作用是什么？em和i标签的区别
html em标签的作用是什么?和标签的区别是什么?本篇文章就为大家介绍html em标签的定义和作用,还有关于和标签的区别 html em标签的定义和作用: 标签告诉浏览器把其中的文本表示为强调的内 ...
html里h标签的三个作用,H标签是什么？怎么用？
很多新站站长对于h标签的用法不是很了解,还有些站长对h标签存在着一些误解,鉴于h标签的重要性要超过strong这一点,我们就在本文中详细的探讨一下H标签是什么.h标签对seo有什么用处. 一.H标签是 ...
currentstyle 织梦_织梦channel标签currentstyle样式无效不起作用
我们在用织梦系统制作网站时,经常会用到channel标签来调子栏目.但是,很多朋友会遇到这种情况在使用channel标签来调子栏目的时候,指定 "type=son typeid=x" ...
JSP自定义标签_用简单标签控制标签体执行10次
什么也不说,直接上代码: import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet ...
html标签onload,支持onload事件的HTML标签有哪些
支持onload事件的HTML标签有:"body"."frame"."frameset"."iframe"." ...

html onload不起作用,body标签onLoad执行无效，为何？

html onload不起作用,body标签onLoad执行无效，为何？相关推荐

最新文章

热门文章