执行多个window.onload匿名函数的方法

最新推荐文章于 2023-10-25 17:59:27 发布
最新推荐文章于 2023-10-25 17:59:27 发布
阅读量1k 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45190226/article/details/121565560
版权

业务需求：在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>
    <style type="text/css">
        /*类名选择器*/
        .class1{
   height: 70px;width: 150px;
                text-align: center;/*设置容器中文字位置*/
                border-style: dashed;
                border-width: 3px;
                border-color: #FF0099;
                background-color: #99CCFF;}
    </style>
    <script type="text/javascript">
        /*克隆已经存在的div节点，设置其样式并添加到父元素中*/
        window.onload = function () {
   
            var oDiv1 = document.getElementsByClassName("class1")[0];
            var addNode = function () {
   
                var clonedDiv = oDiv1.cloneNode();//没有使用参数true
                var parentNode = oDiv1.parentNode;
                /*为克隆的新div设置样式*/
                clonedDiv.innerText = "I am cloned here!"
                clonedDiv.style.width = "130px";
                clonedDiv.style.borderStyle = "solid";
                clonedDiv.style.borderColor = "#9900CC";
                clonedDiv.style.borderWidth = "5px";
                clonedDiv.align = "center";
                /*将克隆完成的div添加到父元素里*/
                parentNode.appendChild(clonedDiv);

            }
            oDiv1.onclick = addNode;
        }
        /*创建一个span元素，设置其样式并插入到“第一个div”前面*/
        window.onload = function () {
   
            function creadNode() {
   
                var oSpan = document.createElement("span");
                oSpan.innerText = "我是新创建的span元素！";
                oSpan.style.height = "130px";
                oSpan.style.borderWidth = "6px";
                oSpan
最低0.47元/天 解锁文章
入门有点晚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用多个window.onload
weixin_63719049的博客
03-13 684
使用多个window.onload
多个window onload的解决办法
MrFano的博客
01-25 1981
  同一个页面有很多函数要用到window.onload,但又互相冲突，怎么解决呢，下面是看到的一个函数，和大家分享一下。 function addLoadEvent(func){  // 多个window.onload共用的封装函数     var oldonload=window.onload;      if(typeof window.onload!='function'){   ...
同一个页面上出现多个window.onload方法，如何规避方法被覆盖
最新发布
m0_66962220的博客
10-25 1007
在前端开发中，是一个非常重要的事件。它会在页面加载完成后触发，这意味着我们可以在这个事件处理程序中执行一些必要的初始化操作，比如绑定事件、初始化插件等等。但是，在某些情况下，可能会出现一个页面出现两个的情况，这会导致其中一个事件处理程序被覆盖，从而导致一些意外的问题。在上面的代码中，只有 "第二个 onload" 会在页面加载完成时被打印到控制台。因为第二个覆盖了第一个。那么，如何规避一个页面两个呢？
javascript中怎么让一个页面执行多个window.onload？
weixin_30781107的博客
10-21 309
我们都知道在javascript中window.onload 只能有一个如果有多个的话后面的会覆盖前面的，今天我们来看看怎么让一个页面执行多个window.onload <script type="text/javascript"> function addLoadEvent(func){ var oldon1oad=window.on1oad;//得到上一...
【JS】如何同时处理多个window.onload事件
weknow
09-02 2125
如何同时处理多个window.onload事件
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
01-23
然而，当有多个函数需要在页面加载完成后执行时，直接将它们都绑定到`onload`事件可能会导致问题，因为`onload`事件只能处理一个函数。为了解决这个问题，我们可以使用一种技术叫做“事件监听器的封装”，这里以`...
把多个JavaScript函数绑定到onload事件处理函数上的方法
11-22
3. 如果`window.onload`已经是一个函数，那么创建一个新的匿名函数，这个匿名函数首先调用`oldonload`（即之前绑定的函数），然后调用传入的`func`函数。这样，新函数就会在原有函数执行完毕后执行。 以下是`...
同时使用n个window onload加载实例介绍
12-09
然而，如果在一个页面中有多个`window.onload`事件处理函数，传统的直接赋值方式会覆盖前一个事件，导致只有最后一个注册的函数会被执行。为了解决这个问题，我们需要实现一个可以同时添加多个`onload`事件处理函数...
[removed]追加函数使用示例
09-04
然而，由于`window.onload` 只能绑定一个函数，所以在多个脚本或库需要在这个事件上执行操作时，可能会产生冲突。 为了解决这个问题，我们可以使用“追加函数”技术，即不覆盖原有的`window.onload` 事件，而是将其...
javascript模拟实现多次使用window.onload事件处理函数
叶落无痕的博客
07-06 2990
javascript模拟实现多次使用window.onload事件处理函数: 大家知道当文档内容完全加载完毕的时候就会触发window.onload事件，进而执行事件处理函数。 不过利用window.onload注册事件处理函数的时候只能进行一次，因为后面的会将前面的覆盖，代码如下: [JavaScript] 纯文本查看 复制代码运行代码 1 2
window.onload兼容ie和ff以及多次调用导致相冲突的解决方法
坚持是世界上每个有所建树的人共有的品质！
12-16 2187
标签： 杂谈 分类： JS/JQuery 有的JavaScript脚本必须等待页面加载结束 才能正常执行。 对于这样的情况有两个解决方法：1、将脚本写到html的结束位置。这样只有html全部接在完毕后才会加载执行JavaScript脚本。2、将脚本放在任意位置。通过 window.onload来执行脚本。 window.onload的意思是当页面加载完毕的时候执行。 ***
js window.onload 加载多个函数
weixin_30252709的博客
08-13 290
平时做项目 经常需要使用window.onload，用法如下：function func(){alert("this is window onload event!");return;}window.onload=func;或者如下： window.onload=function(){alert("this is window onload event!");return;}但window.on...
多个window.onload的使用
我爱骑呆马的专栏
06-03 1419
window.onload = function(){ var para =document.createElement("p"); var info = "NodeName:"; info += para.nodeName; info += " NodeType:"; info += para.nodeType; alert(info);
执行多个onload被覆盖问题
fairyier
05-07 3219
一个页面执行多个window.onload，会被最后一个覆盖，前面n个的内容得不到执行，如   window.onload = function(){ var para =document.createElement("p"); var info = "NodeName:"; info += para.nodeName; info += " ...
js将多个方法添加到window对象上的多种方法
weixin_33894992的博客
12-21 1722
方法一：（最简单也是最笨的方法） window.a = function(){}window.b = function(){}window.c = function(){} 方法二：（利用jq的extend方法） window.c = function(){}$.extend(window,{ a:function(){}, b:function(){}, c:...
js window.onload 加载多个函数的方法
HI,我是小瑞！
08-12 1743
http://www.jb51.net/article/20726.htm 用法如下： function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下： window.onload=function(){alert("this is window onload
JS中在windowonload中调用function函数遇见的问题
yangyang的专栏
02-25 2581
参考文章：https://blog.csdn.net/c_p_h/article/details/63684510 今天在jsp中的form表单利用onclick=”xxx”来监听js中一个function xxx(){}函数，遇到一个很奇怪的问题就是点击submit按钮之后竟然没有响应xxx()函数。在这之前我已经多次在form表单中利用onclick=”xxx”来监听一个函数，并没有出现过这种...
如何让window.onload里面的方法按顺序执行
06-03
可以使用回调函数或Promise来解决window.onload中方法按顺序执行的问题。 使用回调函数： ```javascript window.onload = function() { firstFunction(function() { secondFunction(function() { thirdFunction...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值