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。以这种方式添加的监听器将自动堆叠。

＆＃13;

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

＆＃13;

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

仅使用Javascript

1 个答案: