DOM加载完成后执行js(javascript)代码

mac2022-06-30  64

要求js代码是在Dom加载完毕后执行,而不是所有web元素加载完毕。之所以不用onload,是因为onload只能添加1次有效,自己绑事件太麻烦。并且onload是所有元素加载完毕后触发。恨死IE了,没有DOMContentLoaded之类的事件。   jquery的ready()不错,但是太大不想用,就在网上找到一份传说中能兼容所有浏览器的可以追加onload的代码,经过测试发现IE6下面某些网页还是有问题,初步估计可能是网站利用了Ajax修改Dom导致的,最近没时间细看,先贴出来以后修改一下。 用法如下: 1  FP_DomLoaded.load(yourFunction); 2  FP_DomLoaded.load(function(){ alert(‘http://www.fengpiaoyu.com’); }); 代码如下: var FP_DomLoaded = { onload: [], loaded: function() { if (arguments.callee.done) return; arguments.callee.done = true; for (i = 0;i < FP_DomLoaded.onload.length;i++) FP_DomLoaded.onload[i](); }, load: function(fireThis) { this.onload.push(fireThis); if (document.addEventListener) document.addEventListener(“DOMContentLoaded”, FP_DomLoaded.loaded, null); if (/KHTML|WebKit/i.test(navigator.userAgent)) { var _timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { clearInterval(_timer); delete _timer; FP_DomLoaded.loaded(); } }, 10); } /*@cc_on @*/ /*@if (@_win32) var proto = “src=’javascript:void(0)’”; if (location.protocol == “https:”) proto = “src=//0″; document.write(“<scr”+”ipt id=__ie_onload defer ” + proto + “><\/scr”+”ipt>”); var script = document.getElementById(“__ie_onload”); script.onreadystatechange = function() { if (this.readyState == “complete”) { FP_DomLoaded.loaded(); } }; /*@end @*/ window.onload = FP_DomLoaded.loaded; } }; 下面还有一个从jquery里提取出来的ready,不过我没测试过,先贴出来: (function(){ var isReady=false; //判断onDOMReady方法是否已经被执行过 var readyList= [];//把需要执行的方法先暂存在这个数组里 var timer;//定时器句柄 ready=function(fn) { if (isReady ) fn.call( document); else readyList.push( function() { return fn.call(this);}); return this; } var onDOMReady=function(){ for(var i=0;i<readyList.length;i++){ readyList[i].apply(document); } readyList = null; } var bindReady = function(evt){ if(isReady) return; isReady=true; onDOMReady.call(window); if(document.removeEventListener){ document.removeEventListener(“DOMContentLoaded”, bindReady, false); } else if(document.attachEvent){ document.detachEvent(“onreadystatechange”, bindReady); if(window == window.top){ clearInterval(timer); timer = null; } } }; if(document.addEventListener){ document.addEventListener(“DOMContentLoaded”, bindReady, false); }else if(document.attachEvent){ document.attachEvent(“onreadystatechange”, function(){ if((/loaded|complete/).test(document.readyState)) bindReady(); }); if(window == window.top){ timer = setInterval(function(){ try{ isReady||document.documentElement.doScroll(‘left’);//在IE下用能否执行doScroll判断 dom是否加载完毕 }catch(e){ return; } bindReady(); },5); } } })(); 使用方法: ready(dosomething);//dosomething为已存在的函数 //也可以通过闭包来使用 ready(function(){ alert(‘http://www.fengpiaoyu.com’); }); 这个代码也是网上据说从jquery提取的,但个人觉得有点那个,,代码用doScroll来判断IE的DOM是否加载完成,因为DOM未加载完成时调用doScroll方法,会产生异常。但是如果某天IE不报异常了呢?改天有空研究下jquery的代码再说。 再贴一个,有点类似第一个: /* * (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig * Special thanks to Dan Webb’s domready.js Prototype extension * and Simon Willison’s addLoadEvent * * For more info, see: * http://www.thefutureoftheweb.com/blog/adddomloadevent * http://dean.edwards.name/weblog/2006/06/again/ * http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype * http://simon.incutio.com/archive/2004/05/26/addLoadEvent * * * To use: call addDOMLoadEvent one or more times with functions, ie: * * function something() { * // do something * } * addDOMLoadEvent(something); * * addDOMLoadEvent(function() { * // do other stuff * }); * */

addDOMLoadEvent = (function(){ // create event function stack var load_events = [], load_timer, script, done, exec, old_onload, init = function () { done = true;

// kill the timer clearInterval(load_timer);

// execute each function in the stack in the order they were added while (exec = load_events.shift()) exec();

if (script) script.onreadystatechange = ”; };

return function (func) { // if the init function was already ran, just run this function now and stop if (done) return func();

if (!load_events[0]) { // for Mozilla/Opera9 if (document.addEventListener) document.addEventListener(“DOMContentLoaded”, init, false);

// for Internet Explorer /*@cc_on @*/ /*@if (@_win32) document.write(“<script id=__ie_onload defer src=//0><\/scr”+”ipt>”); script = document.getElementById(“__ie_onload”); script.onreadystatechange = function() { if (this.readyState == “complete”) init(); // call the onload handler }; /*@end @*/

// for Safari if (/WebKit/i.test(navigator.userAgent)) { // sniff load_timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) init(); // call the onload handler }, 10); }

// for other browsers set the window.onload, but also execute the old window.onload old_onload = window.onload; window.onload = function() { init(); if (old_onload) old_onload(); }; }

load_events.push(func); } })();

转载于:https://www.cnblogs.com/Mygirl/archive/2011/11/04/2236491.html

相关资源:JAVA上百实例源码以及开源项目
最新回复(0)