我想在网页中动态地包括一个脚本标签，但我无法控制它的src，所以src="source.js"可能看起来像这样。
document.write('<script type="text/javascript">')
document.write('alert("hello world")')
document.write('</script>')
document.write('<p>goodbye world</p>')
一般来说
<script type="text/javascript" src="source.js"></script>
在头部工作很好，但有没有其他方法，我可以动态添加source.js使用innerHTML之类的东西?
我已经试过了
当前回答
以正确的顺序加载相互依赖的脚本。
基于Satyam Pathak的响应，但修复了onload。 它是在脚本实际加载之前触发的。
const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js'] let count = 0 const recursivelyAddScript = (script, cb) => { const el = document.createElement('script') el.src = script if(count < scripts.length) { count ++ el.onload = () => recursivelyAddScript(scripts[count]) document.body.appendChild(el) } else { console.log('All script loaded') return } } recursivelyAddScript(scripts[count])
其他回答
差不多十年过去了，没有人愿意写Promise的版本，所以这里是我的版本(基于这个awnser):
function addScript(src) {
return new Promise((resolve, reject) => {
const s = document.createElement('script');
s.setAttribute('src', src);
s.addEventListener('load', resolve);
s.addEventListener('error', reject);
document.body.appendChild(s);
});
}
使用
try {
await addScript('https://api.stackexchange.com/js/2.0/all.js');
// do something after it was loaded
} catch (e) {
console.log(e);
}
这是我的工作。
你可以检查一下。
var script_tag = document.createElement('script'); script_tag.setAttribute(“src”、“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”); document.head.appendChild (script_tag); 窗口。Onload = function() { if (window.jQuery) { //加载jQuery 警报(“在头部添加脚本标签!”); }其他{ //不加载jQuery 警告(“没有在头部添加脚本标签”); ｝ ｝
以正确的顺序加载相互依赖的脚本。
基于Satyam Pathak的响应，但修复了onload。 它是在脚本实际加载之前触发的。
const scripts = ['https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js', 'https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js'] let count = 0 const recursivelyAddScript = (script, cb) => { const el = document.createElement('script') el.src = script if(count < scripts.length) { count ++ el.onload = () => recursivelyAddScript(scripts[count]) document.body.appendChild(el) } else { console.log('All script loaded') return } } recursivelyAddScript(scripts[count])
我写了一个漂亮的小脚本来加载多个脚本:
function scriptLoader(scripts, callback) {
var count = scripts.length;
function urlCallback(url) {
return function () {
console.log(url + ' was loaded (' + --count + ' more scripts remaining).');
if (count < 1) {
callback();
}
};
}
function loadScript(url) {
var s = document.createElement('script');
s.setAttribute('src', url);
s.onload = urlCallback(url);
document.head.appendChild(s);
}
for (var script of scripts) {
loadScript(script);
}
};
用法:
scriptLoader(['a.js','b.js'], function() {
// use code from a.js or b.js
});
window.addEventListener("load", init); const loadScript = async (url) => { const response = await fetch(url); const script = await response.text(); eval(script); } function init() { const wistiaVideo = document.querySelector(".wistia_embed"); if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) { let lazyVideoObserver = new IntersectionObserver(function (entries, observer) { entries.forEach(function (entry) { if (entry.isIntersecting) { setTimeout(() => loadScript("//fast.wistia.com/assets/external/E-v1.js"), 1000); lazyVideoObserver.unobserve(entry.target); console.log("E-v1.js script loaded from fast.wistia.com"); } }); }); lazyVideoObserver.observe(wistiaVideo); } } <div style="height: 150vh; background-color: #f7f7f7;"></div> <h1>Wistia Video!</h1> <div class="wistia_embed wistia_async_29b0fbf547" style="width:640px;height:360px;"> </div> <h1>Video Ended!</h1>
