我想根據條件（用戶的螢屏寬度）加載一個外部 JS 腳本，然后執行一個參考該外部 JS 的腳本。
我想盡可能早地加載外部 JS，所以我將它添加到 中<head>，但是稍后在 中參考 JS 時<body>，它顯示為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>uj5u.com熱心網友回復：
我使用的一種可能的解決方案
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/356443.html
標籤：javascript 异步 同步