如何解决脚本标签冲突的问题？

Posted 2023-03-06

【中文标题】如何解决脚本标签冲突的问题？

【英文标题】：How do I resolve this issue with conflicting script tags?

【发布时间】：2016-04-28 12:26:27

【问题描述】：

我整个星期都在研究这个问题，但我自己无法解决，所以我非常感谢你能提供的任何帮助。我使用 html、JS 和 CSS 使视频结束后网页上出现一个模态框。但是，由于格式问题，我需要为移动设备使用不同的视频和模式框。我添加了新的 HTML 和 CSS，以便正确的视频和模式框只会出现在桌面版和移动版上。

不过，我遇到了 JS 的问题 - 无论列出的第二个代码都有效，因此在移动版本或桌面版本的视频结束后会出现模态框，但不是两者兼而有之。我现在明白脚本有冲突，所以第二个有效，而不是第一个。

我寻找解决冲突的解决方案，但我发现没有用。然后我尝试使用基于屏幕宽度 (Change div content if screen resolution is less than?) 的 if else 语句，但这也不起作用。

这是我的两个相互冲突的脚本：

移动

window.onload=function() document.getElementById('mobileVideo').addEventListener('end', showmobileRatings);函数 showmobileRatings() document.getElementsByClassName("modalmobile")[0].style.display='block';

桌面

window.onload=function() document.getElementById('myVideo').addEventListener('end', showRatings);函数 showRatings() document.getElementsByClassName("modalAppear")[0].style.display='block';

或见：http://codepen.io/anon/pen/gPoqjd?editors=011

无论我是在移动设备上还是桌面上，我如何将它们结合起来，让它们都能正常工作？

提前致谢

【问题讨论】：

如何将这些脚本放在页面上？

【参考方案1】：

不要将东西分配给window.onload。它只能容纳一个函数。

请改用addEventListener。

addEventListener('load', function(event) 
  console.log("Function 1");
);
addEventListener('load', function(event) 
  console.log("Function 2");
);