仅使用 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

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

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 版本，则可以使用 polyfill使其正常工作。