`
jasonw68
  • 浏览: 153114 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

window.onload冲突

阅读更多
window.onload的意思是当页面加载完毕的时候执行。通常把JS脚本放在任意的位置,通过window.onload来执行脚本。但是当同一个页面里出现了两个window.onload=function(){};,就会发现先读的脚本失效了。通常一个页面是只能执行一个window.onload的,这个时候可以通过下面的方法解决:

    用window.attachEvent和window.addEventListener。

    当某一事件被触发时需要执行某个函数,在IE下可用attachEvent,在FF下则要用addEventListener。

    attachEvent()有两个参数,第一个是事件名称,第二个是需执行的函数;

    addEventListener()有三个参数,第一个是事件名称,但与IE事件不同的是,事件不带"on",比如"onsubmit"在这里应为"submit",第二个是需执行的函数,第三个参数为布尔值;

if (document.all){

window.attachEvent('onload',函数名)//IE中

}

else{

window.addEventListener('load',函数名,false);//firefox

}

    使用上边的脚本就可以解决onload冲突了。

 

分享到:
评论

相关推荐

    Jqyery中同等与js中windows.onload的应用

    在JavaScript中,`window.onload` 是一个非常关键的事件,用于确保在页面所有资源(包括图像、脚本、样式表等)完全加载之后再执行指定的函数或代码块。这通常用于那些依赖于页面元素存在的操作,因为这些操作需要...

    页面中body onload 和 [removed] 冲突的问题的解决

    综上所述,解决 `body.onload` 和 `window.onload` 冲突的关键在于正确地合并事件处理函数,确保每个函数都能按预期执行。同时,理解不同事件的触发时机和浏览器兼容性问题也是编写健壮的JavaScript代码所必需的。

    Jquery 在页面加载后执行的几种方式

    需要注意的是,jQuery的`$(document).ready()`方法可以多次使用,而且它和原生的`window.onload`并不冲突。如果两者都使用,则`window.onload`会在`$(document).ready()`之后执行。`window.onload`通常用于在页面...

    [removed]追加函数使用示例

    然而,由于`window.onload` 只能绑定一个函数,所以在多个脚本或库需要在这个事件上执行操作时,可能会产生冲突。 为了解决这个问题,我们可以使用“追加函数”技术,即不覆盖原有的`window.onload` 事件,而是将其...

    js onload处理html页面加载之后的事件

    使用`addEventListener`或`attachEvent`可以避免覆盖之前的onload事件处理程序,使得多个脚本模块能够各自添加它们自己的事件处理程序,而不必担心冲突。 另外,需要注意的是,如果在页面中有`<body>`标签里设置了`...

    javascript自执行函数之伪命名空间封装法.docx

    window.onload = function() { // 调用封装在mySpace命名空间下的_setStyle方法 window.mySpace.setStyle("test", "color", "#f00"); }; ``` #### 五、优点分析 1. **保护内部实现**:通过将函数封装在自执行...

    深入理解JS addLoadEvent函数

    如果`window.onload`尚未被赋值(即其类型不是函数),那么`addLoadEvent`会直接将新的函数`func`赋值给`window.onload`,这样当页面加载完成时,新函数会被执行。 ```javascript if (typeof window.onload != '...

    浅析document.ready和[removed]的区别讲解

    在JavaScript和jQuery的世界里,了解`document.ready`和`window.onload`的区别是非常重要的,因为它们决定了你的代码何时以及如何执行。这两个事件都是用来确保在执行JavaScript代码之前,页面的资源已经加载完毕,...

    js onload事件不起作用示例分析

    然而,当在JSP页面中遇到onload事件不起作用的问题时,一个常见的原因是在引入外部JavaScript文件时发生了命名冲突。外部JavaScript文件中可能已经存在window.onload事件的处理器,当它被执行时,会覆盖掉我们在页面...

    同时使用n个window onload加载实例介绍

    总结一下,这个`addEvent`函数的实现方式提供了一种优雅的解决多事件处理函数冲突的方法,特别适用于`window.onload`这种可能会有多个处理函数需要添加的情况。通过这种技术,开发者可以在不破坏原有逻辑的情况下,...

    页面加载完后自动执行一个方法的js代码

    然而需要注意的是,这种写法可能不适用于需要传递参数给函数的情况,并且如果页面中有多个`onload`事件的话,这会导致冲突。 2. 在JavaScript脚本中使用window.onload: 另一种更为推荐的方法是在脚本中通过`...

    jquery跟js初始化加载的多种方法及区别介绍

    原生 JavaScript 的初始化加载通常依赖于 `window.onload` 事件,这会在整个页面(包括图片、视频等所有外部资源)完全加载后触发。 1. **window.onload** ```javascript window.onload = function() { alert(...

    解决chrome对jQuery的支持问题

    1. **使用`window.onload`**:`window.onload`事件会在整个页面包括图片、脚本等所有资源加载完毕后触发。但是,相比于`$(document).ready()`,它的执行时间可能会更晚,因为需要等待所有资源加载。 2. **使用...

    JQuery的ready函数与JS的onload的区别详解

    window.onload事件处理函数在定义时只能有一个,如果有多个window.onload事件被指定,后续的会覆盖先前的。这一限制使得开发者在需要执行多个onload事件处理函数时,不得不编写额外的代码以确保所有需要执行的代码都...

    javascript 事件加载与预加载

    在JavaScript中,最基础的事件加载方式是使用`window.onload`。这个事件会在整个页面(包括所有资源,如图片、脚本等)完全加载后触发。然而,当需要添加多个`onload`事件时,问题就会出现,因为它们会相互覆盖,...

    公共js在页面底部加载的注意事项介绍

    在这样的结构中,JavaScript和CSS文件通常会包含在页脚模板中,这可能导致在主内容视图中需要使用的JavaScript代码无法正确地在window.onload中设置,因为此时页面还未完成加载。 5. 在实际开发中,可以使用立即...

    javaScript和jQuery自动加载简单代码实现方法

    类似于 JavaScript 的 `window.onload`,`$(window).load()` 等待所有资源(包括图片)加载完毕: ```javascript $(window).load(function() { // ... }); ``` 3. 立即执行的匿名函数: 这是一种立即运行的...

    JS、CSS加载中的小问题探讨

    在原始内容中提到,如果一个页面上存在多个window.onload函数,则只有最后一个会被执行。这是因为在JavaScript中,window.onload是一个事件处理器,它只能绑定一个事件处理函数。如果给它绑定了多个函数,那么只有...

    关于JS与jQuery中的文档加载问题

    首先,我们需要明确一点,无论是JS原生的`window.onload`方法还是jQuery中的`$(document).ready()`方法,都是用于在文档加载完成后执行相关的JavaScript代码。但是,这两种方法在用法和执行时机上存在明显的差别。 ...

    jQuery学习笔记之2个小技巧

    本篇学习笔记主要介绍了两个在使用jQuery时可能遇到的常见问题及其解决方案:jQuery功能函数前缀的使用和解决window.onload函数冲突的问题。 首先,关于jQuery功能函数前缀的使用。在JavaScript中,编程者经常需要...

Global site tag (gtag.js) - Google Analytics