有条件地加载然后引用外部JS

Question

我想根据条件（用户的屏幕宽度）加载外部 JS 脚本，然后执行引用该外部 JS 的脚本。

我想尽早加载外部JS，所以我把它添加到<head>，但是在<body>后面引用JS时，它显示为undefined.

我假设这是由于 JS 的同步加载，但不知道如何让它工作。

<head>
  <script>
    const viewWidth = window.innerWidth;

    if (viewWidth >= 480) {
      console.log('big screen');
      const swiperJS = document.createElement('script');
      swiperJS.type = "text/javascript";
      swiperJS.src = "https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.2.0/swiper-bundle.min.js";
      document.head.appendChild(swiperJS);
    }
  </script>
</head>

<body>
  <script>
    if (viewWidth >= 480) {
      const swiper = new Swiper('.swiper');
    }
  </script>
</body>

Answer 1

一种可能的解决方案我用了

swiperJS.addEventListener('load', callback);

回电

<head>
    <script>
        function loadScript(url, callback) {
            const viewWidth = window.innerWidth;
            if (viewWidth >= 480) {
                console.log('big screen');
                const swiperJS = document.createElement('script');
                swiperJS.type = "text/javascript";
                swiperJS.src = url;
                swiperJS.addEventListener('load', callback);
                document.head.appendChild(swiperJS);
            }
        }

        function init() {
            console.log("inside init")
            const swiper = new Swiper('.swiper');
        }
        loadScript("https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.2.0/swiper-bundle.min.js", init)
    </script>

</head>

<body>
</body>

有条件地加载然后引用外部JS

Conditionally load and then reference external JS

javascript

asynchronous

synchronous