javascript:页面中有多处window.onload时的处理(chrome 105.0.5195.125)

一,js代码:

复制代码
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
<script>
//console.log("window.onload未执行前的值:"+window.onload);
//console.log("window.onload未执行前的类型:"+typeof(window.onload));

//第一处onload
window.onload = function() {
    console.log('window.onload1');
}
//console.log("window.onload第一次执行过后的值:"+window.onload);
//console.log("window.onload第一次执行过后的类型:"+typeof(window.onload));
//第二处onload
window.onload = function() {
    console.log('window.onload2');
}
//console.log("window.onload第二次执行过后的值:"+window.onload);
//console.log("window.onload第二次执行过后的类型:"+typeof(window.onload));
//加载函数到window.onload
function addLoadEvent(myOnload) {
                var oldOnload = window.onload;
                console.log("window.onload当前的值:");
                console.log(oldOnload);
                console.log("window.onload当前的类型:"+typeof(window.onload));
                if (typeof window.onload != 'function') {
                    window.onload = myOnload;
                } else {
                    window.onload = function() {
                        oldOnload();
                        myOnload();
                    }
                }
}

//函数
function onload1() {
     console.log('function onload1');
}
//函数
function onload2() {
     console.log('function onload2');
}
//调用
addLoadEvent(onload1);
//调用
addLoadEvent(onload2);

</script>
</body>
</html>
复制代码

说明:刘宏缔的架构森林是一个专注架构的博客,

网站:https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/03/javascript-ye-mian-zhong-you-duo-chu-window-onload-shi-de/

         对应的源码可以访问这里获取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,测试效果

 

 可以看到如果直接在页面中写入多个window.onload时,后面的函数会覆盖前面的,

所以我们需要根据判断加入之前的函数

三,查看chrome的版本:

 

posted @   刘宏缔的架构森林  阅读(264)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2021-09-26 前台项目基础框架之spring boot后端(spring boot v2.5.4)
2021-09-26 前台项目基础框架之vue前端(vue@3.2.6)
2021-09-26 intellij idea 2021.2:为一个spring boot项目改名
2020-09-26 linux(centos8):安装配置consul集群(consul 1.8.4 | centos 8.2.2004)
点击右上角即可分享
微信分享提示