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

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 时，它不会立即加载。并且在加载标签及其内容 evaluated/run.

之前，浏览器不会停止当前脚本的执行

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

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

import third-party library from cdn using inline JavaScript

html

javascript

web-deployment