如何让页面加载完成后执行js
发布时间:2025-05-24 01:56:21 发布人:远客网络
一、如何让页面加载完成后执行js
在很多情况下，js代码需要设置为在页面加载之后才去执行，如果在页面没有加载完毕就执行js代码，很容易出现报错情况，因为页面中的某些dom根本没有加载完毕。本文章向大家介绍如何让js脚本在页面加载完后再执行的几种方法。需要的朋友可以参考一下。
javascript当页面dom模型加载完成后才执行javascript
不能使用<body onload="">
加上 defer等于在页面完全在入后再执行，相当于 window.onload，但应用上比 window.onload更灵活
<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"" xmlns=" http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title></head><body><script defer="defer">alert("页面加载完我才执行的")</script>先看到这段话然后再执行上面的 JS如果去掉上面的 defer="defer"那么会先执行JS在看到这段话</body></html>
<script defer="defer" language="javascript"></script>
<script defer language="javascript"></script>
但这种方法只有IE支持，其他浏览器不识别defer这种方法不靠谱
<script type=”text/javascript”>window.onload=function(){ var userName=”xiaoming”; alert(userName);}</script>
但这个方法在IE中只能在一个地方调用，假如2个地方调用，后面调用的就会把前面的添加的覆盖掉；
方法3：jQuery方法，需要引用jQuery文件。
<script type=”text/javascript”>$(document).ready(function(){ var userName=”xiaoming”; alert(userName);});</script>
下面我们介绍一下Window.onload=function(){}与$(document).ready(function(){})的区别：
在Jquery里面，我们可以看到两种写法:$(function(){})和$(document).ready(function(){})
这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
那么Jquery里面$(document).ready函数的内部是怎么实现的呢？下面我们就来看看：
我们来为document添加一个ready函数：
document.ready= function(callback){///兼容FF,Google if(document.addEventListener){ document.addEventListener('DOMContentLoaded', function(){ document.removeEventListener('DOMContentLoaded', arguments.callee, false); callback();}, false)}//兼容IE else if(document.attachEvent){ document.attachEvent('onreadystatechange', function(){ if(document.readyState=="complete"){ document.detachEvent("onreadystatechange", arguments.callee); callback();}})} else if(document.lastChild== document.body){ callback();}}
document.ready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”：
window.onload= function(){ alert('onload');}; document.ready(function(){ alert('ready');});
执行这段代码之后，你会看到浏览器里面会先弹出“ready”,在弹出onload。
二、jsp调用js的变量
1、首先在jsp页面上，定义二个变量。
2、然后在页面下方，添加一个js脚本块。
3、在脚本块里定义一个js变量，然后使用jsp的输出标记，输出jsp的变量s，赋值给js变量。
4、在页面里有一个js脚本方法，假设这个方法要用到jsp的变量。
5、可以直接使用js的那个变量就行了，因为这个变量就是使用jsp输出标记赋值jsp的变量值的。
6、最后运行jsp页面，在浏览器的控制台，可以看到输出的值就是jsp定义的变量的值了。
三、js文件调用js文件
1、document.write("<script src='2.js'></script>");
document.write("<scri"+"pt type='text/javascript' src='2.js'></scr"+"ipt>");
==============================测试html页面========================
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<TITLE> New Document</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="1.js"></script>
<BODY onload="javascript:f1();">
============================== 1.js========================
document.write("<scri"+"pt src='2.js'></scr"+"ipt>");
============================== 2.js========================
打开html，显示对话框“from 2.js”,调用成功。
================================补充===========================
1：1.js调用2.js为什么非在onload中调用？我用onload仅仅是举个例子。
2：onload事件中可以同时调用多个js函数，如果可以，把你的追加在后面，
例如：<BODY onload="javascript:f1();f1();f2();">
3：1.js调用2.js，里面的函数什么被调用，完全要看实际情况，不一定在onload中，不知道你有没有明白我的意思。
