转载 页面加载完后执行js代码
2013-06-26 11:39
579 查看
最近在写javascript100插件时,遇到网友提的一个问题,代码必须放在body结束标签之后才能正常执行,放在head标签里面就会报错了。
想了下原因,因为我写的这个javascript100插件中操作了页面的DOM元素,假如放在head之间,因为页面DOM还没开始渲染,所以会报错
为了让插件更加人性化,我还是想改进下这个缺陷,就必须让代码在页面加载完后执行JS代码
在网上搜索了下,让JS代码在页面加载完后执行有很多方法,我就一一列出来下
方法1:
但这种方法只有IE支持,其他浏览器不识别defer 这种方法不靠谱
方法2: 把js代码放在</body>结束标签之后, 因为浏览器代码渲染是从上至下的,这种方法是最傻瓜的,兼容所有浏览器
方法3: 利用document.onreadystatechange事件
不过这种方法,也有缺点有的浏览器在readStates等于loaded时就完了,不会跳到complete状态,而且早期的火狐等浏览器不支持这个事件,单纯的用这种方法不靠谱
方法4:
利用window.onload事件
但这个方法在IE中只能在一个地方调用,假如2个地方调用,后面调用的就会把前面的添加的覆盖掉;
如果2个地方调用,funA()在IE中就不会执行了。
所以只能把它们写在一起,
在IE中调用还是很不方便
不过,外国的一个大牛写了一个函数,利用这个函数,我们就可以多处调用了
我们推荐使用上面这个函数,兼容所有浏览器,最后我选择了这个方法
window.onload是使用的DOM 0 级方法,我们还可以使用DOM 2级方法给onload事件添加需要执行的代码
不过也得写一个兼容函数
我还看了下jQuery的源码
jQuery里面还利用现代浏览器的DOMContentLoaded事件,这个事件是等DOM加载完后,就执行代码了,而不用等整个页面加载完后执行,但IE不支持这个事件,有兴趣的朋友可以自己研究研究
想了下原因,因为我写的这个javascript100插件中操作了页面的DOM元素,假如放在head之间,因为页面DOM还没开始渲染,所以会报错
为了让插件更加人性化,我还是想改进下这个缺陷,就必须让代码在页面加载完后执行JS代码
在网上搜索了下,让JS代码在页面加载完后执行有很多方法,我就一一列出来下
方法1:
方法2: 把js代码放在</body>结束标签之后, 因为浏览器代码渲染是从上至下的,这种方法是最傻瓜的,兼容所有浏览器
方法3: 利用document.onreadystatechange事件
方法4:
利用window.onload事件
所以只能把它们写在一起,
不过,外国的一个大牛写了一个函数,利用这个函数,我们就可以多处调用了
window.onload是使用的DOM 0 级方法,我们还可以使用DOM 2级方法给onload事件添加需要执行的代码
不过也得写一个兼容函数
jQuery里面还利用现代浏览器的DOMContentLoaded事件,这个事件是等DOM加载完后,就执行代码了,而不用等整个页面加载完后执行,但IE不支持这个事件,有兴趣的朋友可以自己研究研究
相关文章推荐
- 页面加载完前执行所有的js代码 解决方案
- js页面加载完之后执行此代码块
- 页面加载完之后在执行js代码
- 页面加载完后自动执行一个方法的js代码
- 页面加载完成后执行JS代码
- 【idea页面代码里不能打断点,但是打了断点页面加载时都会停顿一下】。我误以为执行了。牢记!【js alert()没弹出,那就是js没执行】
- 如何确保页面中的js加载完全后再执行其他代码
- 页面加载完成后自动执行(js代码)
- 页面加载完成再执行js代码
- 页面自动执行(加载)js
- js 页面执行时间计算代码
- js中页面加载完成后执行的几种方式及执行顺序
- 用js判断页面是否加载完成实现代码
- jsp的注释可能会影响页面加载速度让代码扔继续执行
- 当jsp页面完全加载完成后执行一个js函数
- JS代码放在head和body中的区别: 放在head中的JS代码会在页面加载完成之前就读取,而放在body中的JS代码,会在整个页面加载完成之后读取。
- 关于js动态插入script 标签后页面JS代码执行失败的解决方法
- DOM加载完成后执行js(javascript)代码
- Javascript代码在页面加载时的执行顺序介绍
- selenium 学习-js执行,事件模拟,页面加载等待