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

Question

我正在尝试从cdn导入interactjs库。如果您从头部添加了一个脚本标记，它就能工作。但是，我希望能够使用JavaScript加载这个库，并将其带到作用域。

下面代码中的示例：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

这个图书馆有问题吗？

我也尝试从铬控制台导入它，但它也没有工作。我认为应该有一种方法来加载第三方库，并将它们带入范围，而不必在头上添加脚本标记。

Answer 1

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

若要将下一行代码的执行推迟到脚本加载之后，请将它们放在函数中，并将该函数的名称指定为脚本的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>

​