页面公共头尾要引用外部通用的代码,所以是接口数据以文本形式返回的。以v-html的形式加载进页面的,除了script标签内的和script src引入的,都正常的展示了。

v-html加载的js是不会执行的

  • 解决
<template>
  <div v-html="headerHTML"></div>
</template>
<script>
import { getPublicHeader } from '@/request/api'
export default {
  data() {
    return {
      headerHTML: ''
    }
  },
  mounted() {
    this.initMethods()
  },
  methods: {
    async initMethods() {
      await this.getHeader()
    },
     async getHeader() {
      const res = await getPublicHeader()
      this.headerHTML = res
      var reg = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi
      var result = res.match(reg)
      let scriptText = []
      let scriptList = []
      result.forEach((item) => {
        var reg2 = /<script>([\s\S]*?)<\/script>/
        if (item.match(reg2)) {
        let script = document.createElement('script')
          scriptText.push(item.match(reg2)[1])
        } else {
          var reg3 = /<script.*?src="(.*?)".*?\/?>/i
          const url = item.match(reg3)[1]
          scriptList.push(url)
        }
      const list = scriptList.map((item) => {
        return loadJs(item).then((res) => true)
      })
      //解决script标签内写入的js依赖src引入的js文件的问题
      Promise.all(list).then((values) => {
        scriptText.forEach((text) => {
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.text = text
          document.getElementsByTagName('body')[0].appendChild(script)
        })
      })
    }
  }
}
</script>

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐