javascript - 同步加载外部 JavaScript

标签 javascript html xmlhttprequest eval

我必须通过一些 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/

相关文章:

javascript - 从 JavaScript 调用 PHP 文件是否安全?

javascript - 如何让 jquery.Ajax 在 json 响应前面使用 "throw 1; <dont be evil>"?

javascript - JQuery 根据另一个表单输入更新输入值

javascript - Webpack 缩小和未缩小的 Js 和 CSS

javascript - react 中的 CORS 请求

javascript : how to send request in restful

javascript - 如何知道 npm `unzip` 模块何时完成解压缩文件?

javascript - 带有子菜单的 Bootstrap 导航栏 - 如何删除 768 下的类 "disabled"@media width

html - 三格,如果一个为空,展开另外两个

html - XPath 主要用于Html 或XML 或XHTML?