如何添加新脚本并将其加载到滚动条上？

Question

我正在尝试添加新脚本，并且只想在滚动时添加。我试过这个但没有奏效。知道为什么吗？

      $(window).scroll(function() {

       var heightT = $('body').offset().top,

           outerH = $('body').outerHeight(),

           windowH = $(window).height(),

           wS = $(this).scrollTop();

       if (wS > (heightT+outerH-windowH-200)){

          <script src="myscript.js"></script>

       }

Answer 1

您可以动态添加脚本。let scriptAdded = false;$(window).scroll(function() {&nbsp; &nbsp; &nbsp; &nbsp;var heightT = $('body').offset().top,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;outerH = $('body').outerHeight(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;windowH = $(window).height(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;wS = $(this).scrollTop();&nbsp; &nbsp; &nbsp; &nbsp;if (wS > (heightT+outerH-windowH-200) && !scriptAdded){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var script = document.createElement('script');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; script.setAttribute('src','myscript.js');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.head.appendChild(script);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // So that not add many time&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptAdded = true;&nbsp; &nbsp; &nbsp; &nbsp;}}

Answer 2

在这里，我们要确保正确加载脚本。您可以在尝试动态加载脚本时尝试使用侦听器，并确保正确加载脚本。您可以收听 Mutation Events，但由于性能和浏览器兼容性问题不再推荐https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events第二种选择是将事件附加到附加的 childNode。实际上，appendChild 方法返回 childNode，它可以监听 window 触发的 3 个事件。这是一个潜在的香草 javascript 实现：&nbsp; &nbsp; const id = "scriptID";&nbsp; &nbsp; const src = "your script src";&nbsp;&nbsp;&nbsp; &nbsp; const scriptElement = document.getElementById(id);&nbsp; &nbsp; if (!scriptElement) {&nbsp; &nbsp; &nbsp; const script = document.createElement("script");&nbsp; &nbsp; &nbsp; if (script) {&nbsp; &nbsp; &nbsp; &nbsp; script.src = src;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; script.id = id;&nbsp; &nbsp; &nbsp; &nbsp; const loadError = () => throw new Error("can't load the script")&nbsp; &nbsp; &nbsp; &nbsp; const loadSuccess = () => console.log("loaded");&nbsp; &nbsp; &nbsp; &nbsp; const attachedScript = document.body.appendChild(script);&nbsp; &nbsp; &nbsp; &nbsp; const onloadEvent = attachedScript.addEventListener("load", loadSuccess);&nbsp; &nbsp; &nbsp; &nbsp; const onerrorEvent = attachedScript.addEventListener("error", loadError);&nbsp; &nbsp; &nbsp; &nbsp; const onavortEvent = attachedScript.addEventListener("abort", loadError);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; const error = "can't load the script";&nbsp; &nbsp; &nbsp; &nbsp; throw new Error(error);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }但是，上述解决方案在页面完全加载（包括资产）时侦听由 window 触发的 load 事件，这与加载 DOM 但不等待加载资产时触发的 DocumentContentLoaded 事件形成对比：https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event上面的问题是 load 事件应该在第一次加载时使用，而不是在 DOM 发生突变时使用。https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event一个更优雅的解决方案是使用而不是 MutationObserver，这意味着替换 MutationEvents 功能：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver&nbsp; &nbsp; const id = "scriptID";&nbsp; &nbsp; const src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js";&nbsp; &nbsp;&nbsp; &nbsp; const scriptElement = document.getElementById(id);&nbsp; &nbsp; if (!scriptElement) {&nbsp; &nbsp; &nbsp; const script = document.createElement("script");&nbsp; &nbsp; &nbsp; if (script) {&nbsp; &nbsp; &nbsp; &nbsp; script.src = src;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; script.id = id;&nbsp; &nbsp; &nbsp; &nbsp; const observer = new MutationObserver(() => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("change being done");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; observer.disconnect();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; const config = { attributes: false, childList: true, subtree: true };&nbsp; &nbsp; &nbsp; &nbsp; observer.observe( document.body, config);&nbsp; &nbsp; &nbsp; &nbsp; document.body.appendChild(script)&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; const error = "can't load the script";&nbsp; &nbsp; &nbsp; &nbsp; throw new Error(error);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }MutationObserver 会寻找 DOM 突变，但它不会在脚本实际加载时触发，因此也使用 window 的 load 事件会使解决方案更强大。现在，为什么只需要在 DOM 中附加一个脚本就需要所有这些？其中一些原因是：一件事是在 DOM 中附加一个脚本，但重要的是何时加载脚本我们在监听 DOM 操作事件时应该非常小心，因为它很容易导致性能下降附加孩子时不需要听错误，因为失败的情况很少见

Answer 3

如果您使用的是 jQuery，那么您可以使用$.getScript。$.getScript("your/script.js", function(){&nbsp; &nbsp; console.log("Script was loaded");});