如何让页面加载完成后执行js
让页面加载完执行js有2种方法,js放在文档代码的下方和把语句代码放在window.onload方法里面。
js放在文档代码的下方
这是一个最简单的文档结构,引用的javascript文件都放在body的最下方和把语句放在window.onload函数里面,可以让javascript在页面加载完成后执行。
<!doctype html>
<html>
<head>
<title>helloWorld--zxk</title>
</head>
<body>
<div></div>
<script src="xxx"></script>
</body>
</html>
把语句代码放在window.onload函数里面
例如这段代码,虽然script标签没有在最下方,但javascript语句放在了window.onload里面,所以可以在文档加载完成后执行。
<!doctype html>
<html>
<head>
<title>helloWorld--zxk</title>
<script>
window.onload=function(){
alert('页面加载完成!');
}
</script>
</head>
<body>
<div></div>
</body>
</html>
绛旓細 鏃犳爣棰樻枃妗 alert("椤甸潰鍔犺浇瀹鎴戞墠鎵ц鐨") 鍏堢湅鍒拌繖娈佃瘽 鐒跺悗鍐嶆墽琛屼笂闈㈢殑 JS 濡傛灉鍘绘帀涓婇潰鐨 defer="defer" 閭d箞浼氬厛鎵цJS 鍦ㄧ湅鍒拌繖娈佃瘽
绛旓細//椤甸潰鍔犺浇瀹屾瘯鎵ц浠ヤ笅js锛歸indow.onload=function() { //瀹炵幇椤甸潰璺宠浆 location.href(url);}
绛旓細1銆侀鍏堝缓绔嬩竴涓埗绾椤甸潰parent.html,浠g爜濡傚浘锛屼竴涓猵op鍑芥暟鏂规硶锛屼竴涓摼鎺ュ埌child.html鐨刬frame鏍囩銆2銆佸啀鏂板缓涓涓猚hild.html椤甸潰锛屽鍥撅紝灞曠ず涓涓猧d=link鐨刣iv鏍囩锛屽拰link鐨勭偣鍑讳簨浠讹紝鍥犱负鏄皟鐢ㄧ埗绾ф柟娉曪紝鎵浠ラ渶瑕佺敤鍒皐indow.parent.pop()鏂规硶銆3銆侀瑙堥〉闈紝鍙槑鏄剧湅鍒皃arent.html閲岄潰鐨刬frame妗嗘灦...
绛旓細鍔犱笂涓鍙ワ細window.onload = function () { ... js 浠g爜... }
绛旓細璁js浠g爜椤甸潰鍔犺浇鍚鍐鎵ц锛寃indow.onload=function(){}
绛旓細绗竴绉嶆柟娉曪細灏唈s鏂囦欢鏀惧湪浠g爜鏈鍚庯紝鍥犱负绋嬪簭鏄粠涓婂線涓鎵ц锛屾墍浠ユ渶鍚庡姞杞姐傝繖绉嶆柟娉曟渶绠鍗曠矖鏆淬傜浜岀鏂规硶锛氫娇鐢╳indow.onload 浜嬩欢銆傚綋涓涓枃妗e畬鍏ㄤ笅杞藉埌娴忚鍣ㄤ腑鏃讹紝鎵嶄細瑙﹀彂window.onload浜嬩欢銆傝繖鎰忓懗鐫椤甸潰涓婄殑鍏ㄩ儴鍏冪礌瀵筳s鑰岃█閮芥槸鍙互鎿嶄綔鐨勶紝涔熷氨鏄椤甸潰涓婄殑鎵鏈夊厓绱鍔犺浇瀹屾瘯鎵嶄細鎵ц銆傝繖绉嶆儏鍐...
绛旓細Onbeforeunload涔熸槸鍦ㄩ〉闈㈠埛鏂版垨鍏抽棴鏃惰皟鐢紝Onbeforeunload鏄瑕佸幓鏈嶅姟鍣ㄨ鍙栨柊鐨勯〉闈㈡椂璋冪敤锛屾鏃惰繕娌″紑濮嬭鍙栵紱鑰宱nunload鍒欏凡缁忎粠鏈嶅姟鍣ㄤ笂璇诲埌浜嗛渶瑕佸姞杞界殑鏂扮殑椤甸潰锛屽湪鍗冲皢鏇挎崲鎺夊綋鍓嶉〉闈㈡椂璋冪敤銆侽nunload鏄棤娉曢樆姝㈤〉闈㈢殑鏇存柊鍜屽叧闂殑銆傝 Onbeforeunload 鍙互鍋氬埌銆椤甸潰鍔犺浇鏃跺彧鎵цonload椤甸潰鍏抽棴鏃跺厛鎵ц...
绛旓細鏀惧湪body鐨刼nload浜嬩欢閲屽氨琛屽惂,褰椤甸潰鍔犺浇瀹屽悗鎵ц 濡傛灉涓嶈鐨勮瘽,浣犲彲浠ヨ瘯璇鎶浜嬩欢鍐欏湪body鐨勬渶鍚庨潰鐩存帴闇瑕佹墽琛岀殑js
绛旓細){ $("#a").click(function(){ //adding your code here }); } 杩欐浠g爜浼氬湪鏁翠釜椤甸潰鐨刣ocument鍏ㄩ儴鍔犺浇瀹屾垚浠ュ悗鎵ц銆傝繖绉嶆柟寮忎笉浠呰姹傞〉闈㈢殑DOM tree鍏ㄩ儴鍔犺浇瀹屾垚锛岃屼笖瑕佹眰鎵鏈夌殑澶栭儴鍥剧墖鍜岃祫婧愬叏閮ㄥ姞杞藉畬鎴愩傚鏋滃閮ㄨ祫婧愶紝渚嬪鍥剧墖闇瑕佸緢闀挎椂闂存潵鍔犺浇锛岄偅涔堣繖涓js鏁堟灉灏变細璁╃敤鎴锋劅瑙夊け鏁堜簡銆
绛旓細浣犵殑鎰忔濇槸鍒锋柊椤甸潰涔熶笉鍐嶆墽琛岀殑鎰忔濆惂銆傚鏋滄槸杩欎釜鎰忔濓紝缁欎綘涓濊矾锛氫綘闇瑕佸埄鐢╟ookie鍦ㄥ鎴风鍐欎竴涓暟鎹紝鐒跺悗椤甸潰鎵цjs涔嬪墠锛屾鏌ookie涓殑鏁版嵁鏄惁瀛樺湪锛屽鏋滃瓨鍦ㄥ氨涓嶆墽琛岋紝濡傛灉娌℃湁cookie涓殑鏁版嵁锛屽氨鎵ц璇ユ搷浣溿俲s鏄瘡娆椤甸潰鍔犺浇閮戒細琚姞杞界殑銆傚洜涓簀s鏄〉闈㈢殑涓閮ㄥ垎锛屼絾鏄槸鍚︽墽琛岀浉搴旂殑鍛戒护锛屾墠...