javascript - 使用内联 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

这是这个特定库的问题吗？

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

Answer 1

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

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