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

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() {

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

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

           windowH = $(window).height(),

           wS = $(this).scrollTop();

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

          var script = document.createElement('script');

          script.setAttribute('src','myscript.js');

          document.head.appendChild(script);

          // So that not add many time

          scriptAdded = true;

       }

}

Answer 2

在这里，我们要确保正确加载脚本。您可以在尝试动态加载脚本时尝试使用侦听器，并确保正确加载脚本。

您可以收听 Mutation Events，但由于性能和浏览器兼容性问题不再推荐

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

第二种选择是将事件附加到附加的 childNode。实际上，appendChild 方法返回 childNode，它可以监听 window 触发的 3 个事件。

这是一个潜在的香草 javascript 实现：

    const id = "scriptID";

    const src = "your script src";  

    const scriptElement = document.getElementById(id);

    if (!scriptElement) {

      const script = document.createElement("script");

      if (script) {

        script.src = src;       

        script.id = id;

        const loadError = () => throw new Error("can't load the script")

        const loadSuccess = () => console.log("loaded");

        const attachedScript = document.body.appendChild(script);

        const onloadEvent = attachedScript.addEventListener("load", loadSuccess);

        const onerrorEvent = attachedScript.addEventListener("error", loadError);

        const onavortEvent = attachedScript.addEventListener("abort", loadError);

      } else {

        const error = "can't load the script";

        throw new Error(error);

      }

    }

但是，上述解决方案在页面完全加载（包括资产）时侦听由 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

    const id = "scriptID";

    const src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js";   

    const scriptElement = document.getElementById(id);

    if (!scriptElement) {

      const script = document.createElement("script");

      if (script) {

        script.src = src;       

        script.id = id;

        const observer = new MutationObserver(() => { 

          console.log("change being done");

          observer.disconnect();

        });

        const config = { attributes: false, childList: true, subtree: true };

        observer.observe( document.body, config);

        document.body.appendChild(script)

      } else {

        const error = "can't load the script";

        throw new Error(error);

      }

    }

MutationObserver 会寻找 DOM 突变，但它不会在脚本实际加载时触发，因此也使用 window 的 load 事件会使解决方案更强大。

现在，为什么只需要在 DOM 中附加一个脚本就需要所有这些？其中一些原因是：

• 一件事是在 DOM 中附加一个脚本，但重要的是何时加载脚本

• 我们在监听 DOM 操作事件时应该非常小心，因为它很容易导致性能下降

• 附加孩子时不需要听错误，因为失败的情况很少见

Answer 3

如果您使用的是 jQuery，那么您可以使用$.getScript。

$.getScript("your/script.js", function(){

    console.log("Script was loaded");

});