window.onload使用方法

最新推荐文章于 2024-08-15 11:39:27 发布
最新推荐文章于 2024-08-15 11:39:27 发布
阅读量8.5w 收藏 15
点赞数 3
分类专栏： web开发 文章标签： 脚本 function ie 文档 null
本文详细介绍了页面加载过程中的脚本处理方法，包括window.onload应用、不同浏览器的兼容性处理、以及如何确保页面元素加载完毕后再执行特定操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. <p><script type="text/javascript"></p>  
  2. <p>function init(){</p>  
  3. <p>  alert("页面加载完毕！");</p>  
  4. <p>}</p>  
  5. <p>window.onload=init;</p>  
  6. <p></script></p>  
  7.   
  8.   
  9. 我们经常使用 window.onload 来处理页面，当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成，甚至包括图片  
  10.   
  11. 1. window.onload = function(){}  
  12.   
  13. 2. window.onload ＝ functionName; // [color=red]注意:没有括号   
  14.   
  15. 3. IE:  
  16.    window.attachEvent("onload",functionName);  
  17.    FF:  
  18.    window.addEventListener(); // 参数怎么写我忘了, 请自己搜索   
  19.   
  20. body onload="init();"事件是等doucment加载完成再加载相应的脚本  
  21. document.onreadstatechange()是指当对象状态变更时触发脚本  
  22.   
  23.   
  24. <script type="text/javascript">  
  25.    function init() {  
  26.        // quit if this function has already been called  
  27.        if (arguments.callee.done) return;  
  28.   
  29.        // flag this function so we don't do the same thing twice  
  30.        arguments.callee.done = true;  
  31.   
  32.        // create the "page loaded" message  
  33.        var text = document.createTextNode("Page loaded!");  
  34.        var message = document.getElementById("message");  
  35.        message.appendChild(text);  
  36.    };  
  37.   
  38.    /* for Mozilla */  
  39.    if (document.addEventListener) {  
  40.        document.addEventListener("DOMContentLoaded", init, null);  
  41.    }  
  42.   
  43.    /* for Internet Explorer */  
  44.    /*@cc_on @*/  
  45.    /*@if (@_win32) 
  46.        document.write("<script defer src=ie_onload.js><"+"/script>"); 
  47.    /*@end @*/  
  48.   
  49.    /* for other browsers */  
  50.    window.onload = init;  
  51.   </script>  
  52. <p id="message"></p>  
  53.   
  54.   
  55. 示例  
  56. <script for=window event=onload>  
  57. function inint(){  
  58.    alert("文档加载完成")  
  59. }  
  60. </script>  
  61.   
  62. <script language="Javascript">  
  63. function document.onreadystatechange()  
  64. {  
  65.   DoLayout();  
  66.   window.onresize = DoLayout;  
  67.   
  68.   Composition.document.open()  
  69.   Composition.document.write("<head><style type=\"text/css\">body {font-size: 10.8pt}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE></body>");  
  70.   Composition.document.close()  
  71.   Composition.document.designMode="On"  
  72. }  
  73. </script>  
  74. 这两种加载脚本的方式只针对IE游览器才有效  
  75.   
  76. <script type="text/javascript">  
  77. function init(){  
  78.   alert("页面加载完毕！");  
  79. }  
  80. window.onload=init;  
  81. </script>  
  82.   
  83. <html>  
  84. <body onload="init()">  
  85. </body>  
  86. </html>  
【js的window.onload和jquery的.ready()什么区别】
学无止境
02-24 968
【js的window.onload和jquery的.ready()什么区别】
window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 3037
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
JavaScript原生系列-页面加载完成之后执行（window onload 和 $().ready(function) 以及 body onload="">）
pcaxb的专栏
09-09 8309
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址：https://blog.csdn.net/pcaxb/article/details/100661841 JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 <body onload="">） 目录 1.原生window...
window.onload用法详解
weixin_33835690的博客
02-20 1605
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。二.通过window.onload来执行脚本代码。第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，...
window.onload的用法
热门推荐
nuan__nuan的博客
06-01 5万+
window.onload: 页面加载完成 一，window.onload的用法： 因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。 所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。 例一：点击按钮，实现div变大的效
window的onload()的使用
zmt0104的博客
11-28 4299
1. window.onload有什么作用?   用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 2. window.onload的使用 只有一个函数funcRef()时： window.onload = funcRef; 有多个要执行的函数时： window.onload=function(){ Func1(); Func2(); ...
执行多个window.onload匿名函数的方法
weixin_45190226的博客
11-26 1131
业务需求：在body里面创建一个div元素，点击div元素能够复制div节点，将复制后的div加载到原有的div节点后面，并且重新设置克隆后的div节点的样式。 JS代码特点：在JS语句中有两个window.onload匿名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title&g
解决window.onload延迟加载问题
weixin_30432179的博客
06-23 712
window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点...
JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()
最新发布
pan_junbiao的博客
08-15 1916
JQuery 框架的$(document).ready() 方法和window.onload 方法有相似的功能，但是在执行时机方面时有区别的。window.onload 方法是在页面中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即 JavaScript 此时才可以访问页面中的任何元素。而通过 JQuery 中的$(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，页面的所有元素对 JQuery 而言都是可以访问的。
关于JS的--window.onload()方法
冯小东
05-23 2万+
一、window.onload()方法： 该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。 二、为什么使用window.onload()? 因为JS中的函数方法等需要在HTML文档渲染完成才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样JS文件就可能报出"undefined"错误。 三、常见的用法： 简单的立刻执行函数，假
windows.onload的作用
Marvel__Dead 胡艺宝的博客
11-05 3222
window.onload用法详解: 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式: 一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。 二.通过window.onload来执行脚本代码。 第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本
window.onload用法详解:
xsf1840的博客
12-16 4242
window.onload用法详解: 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式: 一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。 二.通过window.onload来执行脚本代码。 第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚
window.onload的使用
weixin_30569001的博客
02-23 271
window.onload：当页面加载的时候可以调用某些函数 例如： 1、最简单的调用方式 直接写到html的body标签里面，如： <html> <body onload="func()"> </body> </html> 2、在JS语句调用 <script type...
window.onload=function(){};
Charlie8915的博客
01-24 2415
window.onload=function(){}; 只要页面加载完毕，这个事件才会触发 扩展事件--页面关闭后才触发的事件 window.onunload=function(){}; 扩展事件--页面关闭之前才触发的事件 window.onbeforeunload=function(){}; 转载于:https://www.cnblog...
window.onload的简单使用
u010746364的博客
11-25 3032
document.getElementById("btn").onclick = function() { alert("btn"); } window.onload=function() { alert("btn111111"); } 这里当加载页面完成的时候，并没有弹出alert对话框，原因就是这一段代码错误了。 document.getEl
浅谈windows.onload()与$(document).ready()
weixin_30955617的博客
03-09 179
浏览器加载完DOM后，会通过javascript为DOM元素添加事件，在javascript中，通常使用window.onload()方法。 在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。 window.onload() $(document).ready() 执行时机 在页面所有元素（包括图片，引用文件）加载...
JavaScript window.onload 使用教程
然而，需要注意的是，如果有多段代码都需要监听`window.onload`事件，它们可能会覆盖彼此，因此在现代JavaScript中，更推荐使用`addEventListener`方法来添加多个事件处理函数，而不是直接赋值给`onload`属性，例如...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值