使用内联 JavaScript 从 cdn 导入第三方库

Question

我正在尝试从cdn 导入interactjs 库。 如果您从头部添加脚本标签，它会起作用。 但是我希望能够使用 JavaScript 加载此库并将其带到 scope。

以下代码笔中的示例： https://codepen.io/ta32/pen/abLgyGW?editors=1111

  script.type = "text/javascript";
  script.src = "https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js";
  document.head.appendChild(script);
  eval(script);

文章中提到的所有技术都无效 https://levelup.gitconnected.com/how-to-load-external-javascript-files-from-the-browser-console-8eb97f7db778

这个特定的图书馆有问题吗？

我也尝试从 chrome 控制台导入它，但它也不起作用。 我认为应该有一种方法可以加载第三方库并将它们带入 scope 而无需在头部添加脚本标签。

Answer 1

当您将<script>标记添加到 DOM 时，它不会立即加载。 并且浏览器不会停止当前脚本的执行，直到标签被加载并且其内容被评估/运行。

要将下一行代码的执行延迟到脚本加载后，请将它们放在 function 中，并将该函数的名称指定为脚本的onload属性。

看到它工作：

 const myFunc = () => { const position = { x: 0, y: 0 }; interact('.draggable').draggable({ listeners: { start(event) { console.log(event.type, event.target) }, move(event) { position.x += event.dx position.y += event.dy event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, } }) }; const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js'; script.onload = myFunc; document.head.appendChild(script);

 .draggable { width: 25%; min-height: 6.5em; margin: 1rem 0 0 1rem; background-color: #29e; color: white; border-radius: 0.75em; padding: 4%; touch-action: none; user-select: none; }

 <div class="draggable"> Draggable Element </div>