Question

我必须加载一个外部javascript文件才能访问某个对象。

通常，代码非常简单：

<script src='https://example.com/example.js'></script>

<script>

  var instance = new ExampleObj.start({ container: 'element-id' });

</script>

<div id='element-id'></div>

如何在.vue文件中完成此操作？

为什么不起作用：

export default {
  ...
  mounted() {
    const script = document.createElement('script')

    script.setAttribute('src', 'https://example.com/example.js')

    const start = document.createElement('script')

    start.text = `var instance = new ExampleObj.start({ container: 'element-id' });`

    document.body.appendChild(script)
    document.body.appendChild(start)
  }
  ...
}

上面的^示例给出了错误：ExampleObj not defined，但是，如果我尝试访问ExampleObj，则会在start方法有效的情况下显示在开发人员控制台上。

Answer 1

请按照以下步骤操作：

在vue.js脚本上方的index.html中添加CDN脚本。我会把它放在头尾标记之前：

<script src='https://example.com/example.js'></script> </head>

如果您使用webpack，请添加到externals，以便将其导入到vue组件中。
如果您不使用webpack，请在mount（）函数中使用window.ExampleObject访问JS对象。

Answer 2

您应该等待脚本加载：

const script = document.createElement('script')

const start = document.createElement('script')

start.text = `console.log('jquery object', $('#app').text())`

script.onload = () => {
    document.body.appendChild(start)
}

script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')

document.body.appendChild(script)

您应该在onload事件之后设置src属性

此问题：Trying to fire the onload event on script tag

这是我制作的有效的jsFiddle：https://jsfiddle.net/jovmypnx/1/

如何在Vue中加载cdn并访问其对象？

2 个答案: