草庐IT

JavaScript window.onload

runoob 2023-03-28 原文

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

只有一个要执行的函数语法：

window.onload = funcRef;

在页面加载完成后 funcRef 方法会被调用。

有多个要执行的函数语法：

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

在页面加载完成后依次执行 Func1、Func2、Func3。

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

实例

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>没有使用 window.onload() 测试</title>
<style type="text/css">
#bg{
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

尝试一下 »

以上实例我们要实现的效果是将 div 的背景颜色设置为 #F90，但是并没有实现此效果，因为代码是顺序执行的，当执行到 document.getElementById("#bg").style.backgroundColor="#F00" 的时候，还没有加载到此 div 对象，所以背景颜色没有设置成功。报错信息如下：

我们可以添加 window.onload 就可以正常执行，代码修改如下:

实例

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 测试</title>
<style type="text/css">
#bg{
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("bg").style.backgroundColor="#F00";
}
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

尝试一下 »

window.onload 事件绑定事件处理函数，绑定的是一个匿名函数，当然也可以绑定具名函数，代码实例如下:

实例

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 绑定具体函数</title>
<script type="text/javascript">
 
// 函数名为 runoob
window.onload=function runoob(){
  document.write("菜鸟教程 -- 学的不仅是技术，更是梦想！！！");
}
</script>
</head>
<body>
  
</body>
</html>

尝试一下 »

有多个要执行的函数实例：

实例

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 执行多个函数</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
    function runoob1(){
        document.getElementById("bg").style.backgroundColor="#F00";
    }
    function runoob2(){
        document.getElementById("bg").style.width="200px";
        document.getElementById("bg").style.height="200px";
    }
    runoob1();
    runoob2();
}
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

尝试一下 »

window.onload 与 jQuery ready() 区别

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

以上两种方式都是在 HTML 文档完毕后再执行 DOM 操作，但它们还是有一定的区别，如下图：

JavaScriptwindowspanclasshl-brackets

有关JavaScript window.onload的更多相关文章

  1. Javascript 音频对象 onload 事件 - 2

    我正在尝试在加载Javascriptaudio()对象时调用一个函数，但使用onload时它不起作用。myaud.onload=audioDone;但它正在使用image()对象。我怎样才能让它与audio()对象一起工作？谢谢 最佳答案 安元素有一组特定的事件称为mediaevents,和onload不是其中之一您可以使用canplaythrough检查音频是否已加载并可以播放。事件myaud.addEventListener('canplaythrough',audioDone,false);

  2. javascript - 使用 body onload 和 document.write 时忽略样式表 - 2

    我正在用JavaScript进行实验以感受它，并且已经遇到了一个问题。这是我的html代码:Inserttitlehere这是JavaScripttesting.js:functionwriteLine(){document.write("HelloWorld!")}这是样式表styles.css:html,body{background-color:red;}这是一个非常简单的例子，但我可能选择了一个尴尬的例子，在body标签中使用on-load。所以上面的代码加载并运行函数，但样式表什么都不做，除非我删除头部的脚本标签。我试过将脚本标签放在其他地方，但没有任何效果。我在网上研究了如

  3. javascript - 使用 onShow 和 onLoad 为 dijit.layout.ContentPane 创建程序 - 2

    我创建了一个ContentPane，既声明式又编程式。声明式的:程序化varobj_abc;varabchref="abc.php?id=1";obj_abc=newdijit.layout.ContentPane({id:'abccp',title:'abc',href:abchref});如何在程序化的ex中调用do_abc() 最佳答案 为了在技术上等同于您的第一个示例，您只需在传递给ContentPane的构造函数的参数对象中包含onShow:do_abc。(注意do_abc后没有括号-我们感兴趣的是函数对象本身，而不是调用

  4. javascript - 为什么 script.onload 在 Chrome 用户脚本中不起作用？ - 2

    我想使用用户脚本在站点中加载另一个脚本文件。但是，js.onload事件无法正常工作。用户脚本文件://==UserScript==//@nameCodehighlight//@descriptionTest//@includehttp://localhost/*//@version1.0//==/UserScript==varjs=document.createElement('script');js.src="http://localhost/test/js/load.js";document.getElementsByTagName("head")[0].appendChild(

  5. javascript - Jquery Iframe onload 事件未在 Google chrome 上执行 - 2

    我正在将内容从一个框架复制到另一个框架。我的代码在MozillaFirefox中有效，但在GoogleChrome中无效。谁能告诉我哪里出错了？此部分未在Googlechrome中执行:$('#frame1').load(function(e){});下面是我的代码块:$headContent=$("#mainframe").contents().find("head").html();$bodyContent=$("#mainframe").contents().find("body").html();$('');$('',{id:'frame1',class:'myframe',h

  6. javascript - window.onload 工作，但 Chrome 控制台显示 : Uncaught TypeError: window. onload 不是函数 - 2

    我想在页面加载时运行getLocation()方法。我添加了:window.onload(getLocation());并按照我的意愿调用了该函数，但Chrome控制台显示:UncaughtTypeError:window.onloadisnotafunction(anonymousfunction)@(index):116window.onload(getLocation());View位于底部:@{ViewBag.Title="HomePage";}GecodingDemoJavaScript:@sectionScripts{varx=document.getElementById

  7. javascript - 为什么 window.onload 有效而 document.onload 无效？ - 2

    谁能告诉我为什么以下页面在加载时不会触发警报？如果我使用window.onload而不是document.onload它会起作用。为什么会有这种差异？document.onload=function(){alert('Test');} 最佳答案 最简单的答案是它不是那样设计的。浏览器在“endofthedocumentloadingprocess”处执行附加到window.onload的函数。它不会尝试执行附加到document.onload的函数。您可以将函数分配给document.onload，但浏览器不会对其执行任何特殊操作。

  8. javascript - 延迟后如何在 window.onload 中加载 javascript 函数 - 2

    我有几个函数应该在onload事件延迟后触发。它在chrome中运行良好，但在Firefox中运行不正常。functionfoo(){//javascriptcode}window.onload=setTimeout(foo,delay);functionbar(){//javascriptcode}window.onload=setTimeout(bar,delay);如果我删除延迟，“bar”会在Firefox中调用，而“foo”和“bar”会在chrome中调用。这可能是什么问题？ 最佳答案 我很惊讶这两个函数在任何浏览器中都

  9. javascript - jQuery run 函数 onload 和 key up - 2

    我有以下内容，我想在页面加载时第一次运行。然后我希望它在用户进行更改时在keyup上运行。我想运行的函数非常大(为了在此处发布而被删除)所以我不想复制该函数。有没有办法调用函数onload然后在keyup上重用它？谢谢$(document).ready(function(){//thiscalculatesthesumforsometextnodes$("td,input").keyup(function(){varcol_1revenue=$(".Col1Receipts,.Col1Receiptsinput").sum();}//function);//keyup});//docu

  10. javascript - 不要通过 Onload 属性显示损坏的图像 - 2

    我有一个包含大量图片的网站。其中一些在服务器上丢失了-被所有者删除了。如果图像未加载(损坏)，我想显示占位符-标准图像，表示图像丢失。我不想重写所有模板，所以我不能将onError属性添加到每个图像标签，所以我不能使用这个解决方案:jQuery/JavaScripttoreplacebrokenimages是否可以编写全局函数来检查所有图像并替换加载时损坏的图像？ 最佳答案 是的，因为您的标签中有jQuery，您可以为此使用jQuery。绑定(bind)onerror所有的处理程序节点:$('img').on('error',fun

随机推荐