添加到 window.onload 事件?

IT技术 javascript jquery
2021-02-22 05:56:56

我想知道一旦 window.onload 事件已经被分配了一个方法调用,如何向它添加另一个方法调用。

假设脚本中的某个地方我有这个任务......

 window.onload = function(){ some_methods_1() };

然后在脚本中我有这个任务

 window.onload = function(){ some_methods_2() };

就目前而言,只会some_methods_2被调用。有没有办法在window.onload不取消的情况下添加到之前的回调some_methods_1(并且也不包括some_methods_1()some_methods_2()在同一功能块中)。

我想这个问题不是真的,window.onload而是关于 javascript 的一般问题。我不想以window.onload这样的方式分配一些东西,如果另一个开发人员要处理脚本并添加一段也使用的代码window.onload(不查看我以前的代码),他将禁用我的 onload 事件。

我也想知道同样的事情

  $(document).ready()

在jQuery中。我怎样才能在不破坏之前或之后的内容的情况下添加它?

4个回答

如果您使用的是 jQuery,则无需执行任何特殊操作。通过添加的处理程序$(document).ready()不会相互覆盖,而是依次执行:

$(document).ready(func1)
...
$(document).ready(func2)

如果您不使用 jQuery,则可以使用addEventListener,如 Karaxuna 所演示的,加上attachEventIE<9。

请注意,这onload不等同于$(document).ready()- 前者等待 CSS、图像...以及,而后者仅等待 DOM 树。现代浏览器(以及自 IE9 起的 IE)支持DOMContentLoaded文档上事件,它对应于 jQueryready事件,但 IE<9 不支持。

if(window.addEventListener){
  window.addEventListener('load', func1)
}else{
  window.attachEvent('onload', func1)
}
...
if(window.addEventListener){
  window.addEventListener('load', func2)
}else{
  window.attachEvent('onload', func2)
}

如果两个选项是可用的(例如,你是不是处理DOM节点),你仍然可以做到这一点(我用onload作为例子,但其他选项可用onload):

var oldOnload1=window.onload;
window.onload=function(){
  oldOnload1 && oldOnload1();
  func1();
}
...
var oldOnload2=window.onload;
window.onload=function(){
  oldOnload2 && oldOnload2();
  func2();
}

或者,为了避免污染全局命名空间(并可能遇到命名空间冲突),使用导入/导出 IIFE 模式:

window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func1();
  }
})(window.onload)
...
window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func2();
  }
})(window.onload)
您不应该使用 document.addEventListener("load")(在我的 firefox 版本上不起作用),而是使用 window.addEventListener("load")。参见stackoverflow.com/q/16404380/94102
2021-04-18 05:56:56
@JeremySalwen 找到了更好的来源:html.spec.whatwg.org/multipage/indices.html#event-load更正。
2021-04-18 05:56:56
您的意思是“document.attachEvent('onload'...)”,而不是“load”。;)
2021-05-03 05:56:56

您可以使用 attachEvent(ie8) 和 addEventListener 代替

addEvent(window, 'load', function(){ some_methods_1() });
addEvent(window, 'load', function(){ some_methods_2() });

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}
所以为了使其跨浏览器兼容,我应该同时使用两者吗?此外,如果我在脚本中稍后在之前使用 addEventListener 后将回调附加到 window.onload,那么我分配给 addEventListener 的任何内容都会被取消吗?
2021-05-11 05:56:56

基本上有两种方式

  1. 存储之前的值,window.onload以便您的代码可以在代码执行之前或之后调用之前的处理程序(如果存在)

  2. 使用该addEventListener方法(当然 Microsoft 不喜欢并要求您使用另一个不同的名称)。

如果另一个脚本想要使用window.onload并且在不考虑合作的情况下执行它,则第二种方法会给您更多的安全性,但 Javascript 的主要假设是所有脚本都将像您尝试做的那样合作。

请注意,一个不适合与其他未知脚本一起使用的坏脚本总是能够破坏页面,例如通过弄乱原型、污染全局命名空间或破坏 dom。

这很棒!jquery 的 $(document).ready() 或 bind() 怎么样?
2021-04-22 05:56:56
您是否意识到 jquery 只是 Javascript,不是吗?我没有检查,但我的猜测是它可能使用 (2)(如果可用)或 (1) 用于旧浏览器。
2021-04-29 05:56:56
当然,我只是问,因为 $(document).ready() 与 window.onload 有点不同......“ready 事件发生在 HTML 文档加载之后,而 onload 事件发生在之后,当所有内容(例如图像)也已加载。”
2021-05-09 05:56:56

这可能不是一个流行的选择,但有时脚本最终会以不同的块分布,在这种情况下,我发现这是一个快速解决方案

if(window.onload != null){var f1 = window.onload;}
window.onload=function(){
    //do something

    if(f1!=null){f1();}
}

然后在别的地方...

if(window.onload != null){var f2 = window.onload;}
window.onload=function(){
    //do something else

    if(f2!=null){f2();}
}

这将根据需要更新 onload 函数和链