vue使用v-html不执行script标签代码解决
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
页面公共头尾要引用外部通用的代码,所以是接口数据以文本形式返回的。以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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)