window.onload不能正常执行

简介: window.onload不能正常执行

第一天的需求写了一个window.onload ,可以正常执行,第二天加了一个类似的需求,为了分开各个功能,我copy了前一天的代码,完成了功能,没有进行测试,直接上线,导致原来的代码无法运行,就像下面的代码一样

<script>
  // 第一天写的代码
  window.onload = function () {
    console.log("window.onload1");
  };
  // 第二天加的需求
  window.onload = function () {
    console.log("window.onload2");
  };
</script>

控制台只能打印


window.onload2

两次赋值window.onload ,第一次的值被第二次的值给覆盖了,所以第一个函数并没有执行


正确的写法应该是


<script>
  function func1() {
    console.log("window.onload1");
  }
  function func2() {
    console.log("window.onload2");
  }
  //   只能有一个`window.onload`
  window.onload = function () {
    func1();
    func2();
  };
</script>

可以得到期望的输出

window.onload1
window.onload2

相关文章
|
5月前
|
存储 安全 开发者
|
7月前
|
JavaScript 前端开发
$(document).ready()方法和window.onload有什么区别?
$(document).ready()方法和window.onload有什么区别?
51 0
|
JavaScript 前端开发
window.setTimeout() 和window.setInterval() 的用法与区别
window.setTimeout() 和window.setInterval() 的用法与区别
89 0
window.onload不能正常执行
window.onload不能正常执行
130 0
|
前端开发
前端面试题:1.页面加载完成(onload)之前触发的事件;2.History,Location,Window,Navigation的区别;3.e.target和e.currentTarget的区别
★Navagator:提供有关浏览器的信息 ★Window: Window对象处于对象层次的最顶层, 它提供了处理Navagator窗口的方法和属性 ★Location:提供了与当前打开的URL-工作的方 法和属性,是一个静态的对象 ★History:提供了与历史清单有关的信息 ★Document:包含与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用
274 0
|
JavaScript 前端开发