在html中使用window.onload和onload的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在html中使用window.onload和onload的区别相关的知识,希望对你有一定的参考价值。

html页面中某段js中调用了window.onload = function test1(),同时在页面上又有<body onlocad="test2();">语句,
这将会导致window.onload事件覆盖body onload事件,导致body onload事件无效.

解决方法:
第一:attachEven给onload添加所需运行的函数
if(document.all)
  window.attachEvent(\'onload\',FuncName)
else
  window.addEventListener(\'load\',FuncName,false);

第二:把两个初始化函数再组成一个新的函数
function init()
function myfun()
function myinit()
  init();
  myfun();

window.onload=myinit;
第三:对两个函数进行判断加载方式
function addLoadEvent(func)
  var oldonload=window.onload;
  if(typeof.window.onload!=\'function\')
    window.onload=func;
  else
    window.onload=function()
    oldonload();
    func();
  


//添加要加载执行的事件:
addLoadEvent(aaa);
addLoadEvent(bbb);
参考技术A 前面这些答案 都扯到body上去 题主的问题只是单纯问 这两种写法有没有区别。
很明显 没有任何区别。
直接写onload 和 写window.onload 没有任何区别 因为window是默认的 就好alert() 和 window.alert()没有任何区别 一个道理。 alert()是window.alert()的简写 同样前面不加任何东西直接写onload 其实系统已经帮你默认加了window.了
<script>
window.onload=function()alert(111);
</script>
上面这个 和 下面这个 没有任何区别的

<script>
onload=function()alert(111);
</script>
参考技术B 一个是页面加载的时候(window.onload);
另一个是页面加载完成(onload);
举个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">
function aa()
alert("onload");

window.onload = function()
alert('window.onload');

</script>
</head>
<body onload="aa()">
<div></div>
</body>
</html>

测试一下就知道,window.onload都会比load快,因为在压面加载的过程中就开始执行了
参考技术C 在html页面中某段js中调用了window.onload = function test1(),同时在页面上又有<body onlocad="test2();">语句,
这将会导致window.onload事件覆盖body onload事件,导致body onload事件无效.
解决方法:
第一:attachEven给onload添加所需运行的函数
if(document.all)
  window.attachEvent('onload',FuncName)
else
  window.addEventListener('load',FuncName,false);

第二:把两个初始化函数再组成一个新的函数
function init()
function myfun()
function myinit()
  init();
  myfun();

window.onload=myinit;
第三:对两个函数进行判断加载方式
function addLoadEvent(func)
  var oldonload=window.onload;
  if(typeof.window.onload!='function')
    window.onload=func;
  else
    window.onload=function()
    oldonload();
    func();
  


//添加要加载执行的事件:
addLoadEvent(aaa);
addLoadEvent(bbb);
参考技术D window.onload是指页面加载时执行的动作
直接使用onload就等于 body.onload 指的是页面加载完成后执行的动作

前端window.onload 和 $(document).ready() 的区别

 

...

在Stack Overflow上看到了这个问题,自己翻译了过来。


 

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. 

window.onload 是DOM中的标准事件,而$(document).ready() 是jQuery中的事件。 


 

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

当HTML document 载入完毕后,ready 事件发生。但是,onload 事件发生的比ready 更晚。当网页上所有的内容(content)载入完毕后(包括图片),onload 事件才会发生。


 

The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn‘t have to wait for all content to load.

ready 事件的目的是:在document 装在完成之后,ready 事件应该尽可能早的发生。以便于给elements 添加功能,而不用等所有的content 都装载完成。


 

 

 

 

 

...

以上是关于在html中使用window.onload和onload的区别的主要内容,如果未能解决你的问题,请参考以下文章

JS:window.onload的使用

被引用的外部JS存在window.onload时,判断当前页面是否已存在window.onload,并进行相应处理

body里面的onload和window.onload,window.load的区别

jQuery的window.onload和$(function(){})

前端window.onload 和 $(document).ready() 的区别

window.onload和$(document).ready(function(){})的区别