浏览器；在运行本地 JavaScript 文件之前等待元素

Question

我有一些组件，javascript，以及需要按特定顺序运行的元素。

1st - opensheetmusicdisplay.min.js 我在 index.html 文件中。这不是问题。

第二 - <div id="xml">

3rd - xml-loader.js 这取决于 "xml" div 和 opensheetmusicdisplay.min,js

这是index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script rel="preload" src="<%= BASE_URL %>js/osmd/opensheetmusicdisplay.min.js"></script>    
  </head>

  <body>
    <div id="xml2">words go here</div>
    <div id="app"></div>   
  </body>
</html>

这是我要测试的 JavaScript 部分：

window.onload = function() {
    alert("xx == ", document.getElementById("xml2"));
}

alert("xx2 == ", document.getElementById("xml2"));

alert(JSON.stringify(opensheetmusicdisplay, null, 1));

当我运行这个时，它们 "xml2" 的两个实例都显示空白。 opensheetmusicdisplay 确实显示数据，这意味着它正在从 index.html

的 head 部分中的源读取

有人在评论中向我指出 alert 只接受一个参数。这是一个错误，我暂时搁置一边。控制台中的错误是 TypeError: document.getElementById(...) is null.

现在，这是 main.js。由于我的各种想法，评论很多：

// vue 导入和配置从 'vue' 导入 Vue 从“@/App”导入应用程序从 'vue-router'

导入 VueRouter

Vue.use(VueRouter) Vue.config.productionTip = 假

// page imports
import Notation from '@/components/Notation'
import HomePage from '@/components/HomePage'
// component imports and registration
import { FoundationCSS } from  '@/../node_modules/foundation-sites/dist/css/foundation.min.css'
Vue.component('foundation-css', FoundationCSS)

import SideNav from '@/components/SideNav'
Vue.component('side-nav', SideNav);

// import * as Osmd from '@/../public/js/osmd/opensheetmusicdisplay.min.js'
// Vue.component('osmd-js', Osmd)
// import { OsmdJs } from '@/components/Osmd'

import * as XmlJs from '@/../public/js/osmd/xml-loader.js'
Vue.component('xml-js', XmlJs)
// import XLoad from '@/components/XmlLoader'

const router =  new VueRouter({
    mode: 'history',
    routes: [
        { path: '/',
          components: {
              maininfo: HomePage
          }
        },
        { path: '/chromatic-scales/c-chromatic-scale',
          components: {
              maininfo: Notation// ,
              // xmlloader: XLoad
          }
        }
    ]
})


new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

我将 XmlJs 注册为全局，因为这是 100 个实际可行的方法中的唯一方法。然后我将它嵌入 Notation.vue 中，像这样：

<template>
<div>

  <div id="xml">
    {{ notation.data }}
  </div>
  <xml-js />
</div>
</template>

<script>
import axios from 'axios'


export default ({
data () {
return {
notation: null,
}
},
mounted () {
axios
    .get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
    .then(result => (this.notation = result))
}})


</script>

<style scoped></style>

最后一个文件是我正在尝试做的主要内容。 xml-loader.js 从 <div id="xml"> 中吸取数据并执行程序为呈现我想要的输出所做的任何魔术。问题是似乎没有办法等待 {{ notation.data }}.

中的内容

我一般不熟悉使用 vuejs 和前端 javascript 框架。我确实认识到代码目前可能不是最优的。

Answer 1

您可以将 xml-loader.js 作为函数导入到 Notation.vue 中。然后你可以简单地做这样的事情：

mounted () {
  axios.get(PATH).then(result => {
    this.notation = result
    let xmlResult = loadXML(result)
    doSomethingWithResult(xmlResult)
  }
},
methods: {
  doSomethingWithResult (result) {
    // do something
  }
}

Answer 2

存在竞争条件，其中 DOM 元素在访问时不可用。解决方案是不访问 Vue 在其外部创建的 DOM 元素。 DOM 元素仅在异步请求后可供使用：

<template>
<div>
  <div ref="xml" id="xml">
    {{ notation.data }}
  </div>
  <xml-js />
</div>
</template>

<script>
import axios from 'axios'

export default ({
data () {
return {
notation: null,
}
},
async mounted () {
  const result = await axios
    .get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
  this.notation = result;
  this.$nextTick(); // wait for re-render
  renderXml(this.$ref.xml); // pass DOM element to third-party renderer
}})

浏览器；在运行本地 JavaScript 文件之前等待元素

VueJS; wait for element before running local JavaScript File

javascript

vue.js

vuejs2

vuejs3

浏览器；在 运行 本地 JavaScript 文件之前等待元素

VueJS; wait for element before running local JavaScript File

javascript

vue.js

vuejs2

vuejs3

浏览器；在运行本地 JavaScript 文件之前等待元素