2

我有一些外部 js 脚本，我提供给我的用户以嵌入到他们的网站上。它们单独工作正常，但如果您尝试在同一页面中附加两个，其中一个会崩溃（控制台上没有错误）。我认为问题必须与多次调用 windows.onload 有关。

下面是两个嵌入代码的样子：

代码 1

  <script type="text/javascript" src="http://example.com/widget.js"></script>
  <p><span class="punctis-social-widget"></span></p>

代码 2

  <script type="text/javascript" src="http://example.com/poll.js"></script>
  <p><span class="punctis-poll-button"></span></p>

poll.js 和 widget.js 只是两个简单的函数：

poll.js

window.onload = function() {
   alert('IM POLL.js');
}

小部件.js

window.onload = function() {
   alert('IM WIDGET.js');
}

如果您在同一页面中插入代码 1 和代码 2，则不会加载此脚本之一。我该如何解决这个问题？

4

1 回答 1

2

使用EventTarget.addEventListener()

您不能在同一页面上有两个 window.onload。第二个将覆盖第一个。要解决您的问题，请改用多个addEventListener。它将添加功能而不是替换相同的功能。

换这个就行了window.onload=function(){}

这样window.addEventListener("load", function(evt) { /* do something */ })

解释：

let el = document.getElementById('a'); // window in your case

el.addEventListener('click', function(evt) { /* do task 1 */ });
el.addEventListener('click', function(evt) { /* do task 2 */ });

//similarily for window
window.addEventListener("load", function(evt) { /* do task 1 */})
window.addEventListener("load", function(evt) { /* do task 2 */})
于 2021-08-17T07:40:46.190 回答