在使用async/await加载和注入外部脚本时,可能会出现加载顺序错误或注入遗漏的问题。以下是一些可能的解决方法。
const loadScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.setAttribute('src', src);
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
};
async function loadAndInjectScript() {
try {
await loadScript('external-script.js');
const script = document.createElement('script');
script.setAttribute('src', 'external-script.js');
document.head.appendChild(script);
} catch (err) {
console.error(err);
}
}
loadAndInjectScript();
async function loadAndInjectScript() {
await new Promise(resolve => {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', resolve);
} else {
resolve();
}
});
try {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.setAttribute('src', 'external-script.js');
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
const script = document.createElement('script');
script.textContent = 'console.log("Script loaded and executed");';
document.body.appendChild(script);
} catch (err) {
console.error(err);
}
}
loadAndInjectScript();