Me gustaría cargar un script JS externo basado en una condición (el ancho de la pantalla del usuario), luego ejecutar un script que haga referencia a ese JS externo.
Quiero cargar el JS externo lo antes posible, así que lo agregué a <head> , pero cuando hago referencia al JS más adelante en <body> , se muestra como undefined .
Supongo que esto se debe a la carga síncrona de JS, pero no sé cómo hacerlo funcionar.
<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>Una posible solución que utilicé
swiperJS.addEventListener('cargar', devolución de llamada);
para recuperar la llamada
<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>