页面公共头尾要引用外部通用的代码,所以是接口数据以文本形式返回的。以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>