分享

在页面加载完后执行javascript代码 --网上download

 I_T_馆 2014-03-25

最近在写javascript100插件时,遇到网友提的一个问题,代码必须放在body结束标签之后才能正常执行,放在head标签里面就会报错了。
想了下原因,因为我写的这个javascript100插件中操作了页面的DOM元素,假如放在head之间,因为页面DOM还没开始渲染,所以会报错

为了让插件更加人性化,我还是想改进下这个缺陷,就必须让代码在页面加载完后执行JS代码

在网上搜索了下,让JS代码在页面加载完后执行有很多方法,我就一一列出来下
方法1:

  • <script defer="defer" language="javascript"></script>
  • //或者
  • <script defer language="javascript"></script>

但这种方法只有IE支持,其他浏览器不识别defer 这种方法不靠谱

方法2: 把js代码放在</body>结束标签之后, 因为浏览器代码渲染是从上至下的,这种方法是最傻瓜的,兼容所有浏览器

方法3: 利用document.onreadystatechange事件

  • if(document.readyState=="complete"){
  • //js代码
  • }

不过这种方法,也有缺点有的浏览器在readStates等于loaded时就完了,不会跳到complete状态,而且早期的火狐等浏览器不支持这个事件,单纯的用这种方法不靠谱

方法4:
利用window.onload事件

  • window.onload=function(){
  •     funA();
  • }

但这个方法在IE中只能在一个地方调用,假如2个地方调用,后面调用的就会把前面的添加的覆盖掉;

  • window.onload=function(){
  •     funA();
  • }
  • window.onload=function(){
  •     funB();
  • }

如果2个地方调用,funA()在IE中就不会执行了。
所以只能把它们写在一起,

  • window.onload=function(){
  •     funA();
  •     funB();
  • }

在IE中调用还是很不方便

不过,外国的一个大牛写了一个函数,利用这个函数,我们就可以多处调用了

  • var $$ = function(func){
  •     var oldOnload =window.onload;
  •     if(typeof window.onload != 'function'){
  •         window.onload = func;
  •     }else{
  •         window.onload = function(){
  •             oldOnload();
  •             func();
  •         }
  •     }
  • }
  • //调用
  • $$(function(){
  •     //页面加载完后执行js代码
  • })

我们推荐使用上面这个函数,兼容所有浏览器,最后我选择了这个方法

window.onload是使用的DOM 0 级方法,我们还可以使用DOM 2级方法给onload事件添加需要执行的代码
不过也得写一个兼容函数

  • var $$ = function(func){
  •     if ( document.addEventListener ) {
  •         window.addEventListener( "load", func, false );
  •     }else if ( document.attachEvent ){
  •         window.attachEvent( "onload", func);
  •     }
  • }
  • $$(function(){
  •     //页面加载完后执行js代码
  • })

我还看了下jQuery的源码
jQuery里面还利用现代浏览器的DOMContentLoaded事件,这个事件是等DOM加载完后,就执行代码了,而不用等整个页面加载完后执行,但IE不支持这个事件,有兴趣的朋友可以自己研究研究

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多