javascript - 仅使用 Javascript 实现多窗口加载功能

Question

我有一个外部 JS 文件，它将 window.onload 函数添加到页面。

基本前提是，每当用户单击某些链接类时，它就会在您的网站上加载一个弹出窗口。它是用 PHP/JS 编写的，因此假设该函数可以自行运行。

这个JS文件里面有以下代码。

window.onload = function() {
  var anchors = document.getElementsByClassName("vyper-triggers");
  for (var i = 0; i < anchors.length; i++) {
    var anchor = anchors[i];
    anchor.onclick = function() {
      if (isMobile.any()) {
        window.open("$url");
      } else {
        document.getElementById("clickonthis").click();
      }
    }
  }
}

现在我的问题是，当我的用户想要添加 2 个不同的弹出窗口时，window.onload 函数不会堆叠。另外，因为这是我的用户自己添加的嵌入式 JavaScript，所以我无法将这两个函数放入一个大的 window.onload 函数中。

如果有意义的话，我的用户可能会将一个 JS 文件放在其网站的一个区域中，并将另一个 JS 文件放在另一个区域中。

那么，考虑到每个函数必须保持独立，如何使 window.onload 函数无论在页面上放置这些外部 JS 文件还是堆叠起来？

Answer 1

您应该使用addEventListener，而不是设置window.onload 。通过这种方式添加的监听器将自动堆叠。

window.addEventListener('load', function() {
  console.log('First listener');
});

window.addEventListener('load', function() {
  console.log('Second listener');
});

window.addEventListener('load', function() {
  console.log('Third listener');
});

如果您必须支持 IE9 之前的 IE 版本，there's a polyfill这将使这项工作正常进行。