Question

我在html网页的头部有以下代码：

<script type="text/javascript" src="Image-Slider.js"></script>
<script type="text/javascript" src="Image-Slider2.js"></script>

On file＆＃34; Image-Slider.js＆＃34;我有一堆代码，然后是windows.onload = function1;在底部。

Image-Slider2.js是不同文件中完全相同的代码。唯一的区别是他们引用的html页面上的id。

无论哪个脚本首先调用正常，第二个脚本（Image-Slider2）都无法正常工作。

如何在网页打开时让两个脚本都运行？

Answer 1

您无法使用onload =分配多个事件处理程序 - 再次指定覆盖前一个事件处理程序，原因与x = 3; x = 6导致x为6的原因相同

您可以改为使用.addEventListener()：

// in one of your JS files:
window.addEventListener('load', function1)

// in the next JS file:
window.addEventListener('load', function2)

“Image-Slider2.js是不同文件中的完全相同的代码。唯一的区别是他们引用的html页面上的id。”

所以它们完全相同，只是它们不同？

如果你的代码使用全局变量，那么在两个文件中重复它可能不会起作用，因为它们会试图使用相同的变量踩到彼此的脚趾。您可以通过将代码结构化为而不是来使用全局变量或全局函数来解决这个问题，例如通过在以下函数中封装每个文件中的所有代码：

// wrapper function
(function() {

  var anyVariableHere;
  function anyFunction() { }

  window.addEventListener("load", anyFunction);

})(); // run the wrapper function immediately

Answer 2

你可能做错了。 Image-Slider听起来像是一个图书馆。您只需要包含一次，然后使用另一个脚本文件来初始化图像滑块。如果您提供有关您使用的库的更多信息，我可以提供更详细的帮助。

Javascript多个脚本调用使用window.load

2 个答案: