我必须通过一些 JavaScript 添加脚本标记并让它完整执行,因为后面的语句依赖它。
var logIt = (function() {
var i = 0,
logging = document.getElementById('logging');
return function(s) {
var heading = document.createElement('p');
heading.innerText = `${++i}: ${s}`;
logging.appendChild(heading);
}
}());
logIt('starting');
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js';
newScriptTag.type = 'text/javascript';
document.head.appendChild(newScriptTag);
try {
var now = moment().format('HH:mm');
logIt(`moment loaded. The time is ${now}`);
} catch (e) {
logIt(`Moment not loaded: ${e}`);
}
<html>
<head>
<title>Injecting Script Tags</title>
</head>
<body>
<h1>Injecting Script Tags</h1>
<div id="logging"></div>
</body>
</html>
如上面的代码片段所示,在标记插入后,moment()
在语句中不可用。
我认为可以使用eval(...)
来完成,但这个选项并不流行。
最佳答案
使用onload
<script>
上的事件监听器标签:
const URL = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js';
const onMomentReady = () => {
console.log('Moment.js is loaded!');
console.log(typeof moment);
}
var newScriptTag = document.createElement('script');
newScriptTag.onload = onMomentReady;
newScriptTag.src = URL;
// newScriptTag.type = 'text/javascript'; // no need for this
// optional
newScriptTag.async = true;
document.head.appendChild(newScriptTag);
请注意,我添加了 onload
设置src
之前处理程序属性。如果您设置src
首先,处理函数可能不会触发。
关于javascript - 同步加载外部 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56223421/