vue中v-html 后端返回html + script js中click事件不生效

new Vue()2024-08-12 15:12
效果图：

需求：点击加号执行后端返回的script中的代码

后端返回的html：
html 复制代码 
<!DOCTYPE html>
<html lang='zh'>
<head>
<title>xxx</title>
<style>
	body{font-size: 14px}
	p{text-indent: 30px;}
	textarea{width: 100%;}
	input,textarea{box-sizing: border-box;}
	label{cursor: pointer;}
	th{border: none;}
	td{border-style: solid; border-width: 1px;border-color:rgb(50%,50%,50%);}
	table{border-collapse: collapse;width:26cm;}
	td.noneBorder{border-style: none;}
	.soloInput input{width: 100%;height: 100%;border-style: none none solid none;border-width: 1px}
	.mixInput span{border-bottom: solid 1px;min-width: 100px;}
	.addButton div{
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 5px 20px;
		text-align: center;
		display: inline-block;
		font-size: 16px;
	}
</style>
</head>
<body>
<form name="form1">
<table class='outTable'>
<tr>
	<th>&nbsp;</th>
	<td align='center' colspan='3'>类型1</td>
	<td colspan='3' class='soloInput'>
		<span th:if="${pdf}" th:text="${lsLx}"></span>
		<input th:if="${!pdf}" type='text' name='lsLx' th:value="${lsLx}">
	</td>
	<td align='center' colspan='3'>日期</td>
	<td align='center' colspan='5' class='soloInput'>
		<span th:if='${pdf}' th:text="${nYr}"></span>
		<input th:if="${!pdf}" type='date' name='nYr' th:value="${nYr}">
	</td>

</tr>
<tr>
	<th>&nbsp;</th>
	<td align='center' colspan='2' style='border-style:solid solid none solid;'>字段3</td>
	<td align='center' style='border-style:none solid none solid;'>字段4</td>
	<td align='center' rowspan='2' style='border-style:solid solid none solid;'>字段5</td>
	<td align='center' rowspan='2' style='border-style:solid solid none solid;'>字段6</td>
	<td align='center' rowspan='2' style='border-style:solid solid none solid;'>字段7</td>
	<td align='center' colspan='8'>字段8</td>

</tr>
<tr>
	<th>&nbsp;</th>
	<td align='center' colspan='2' style='border-style:none solid none solid;'>编号</td>
	<td align='center' style='border-style:none solid none solid;'>个数</td>
	<td align='center' colspan='2'>1.0</td>
	<td align='center' colspan='2'>2.0</td>
	<td align='center'>3.0</td>
	<td align='center'>4.0</td>
	<td align='center'>5.0</td>
	<td align='center'>6.0</td>

</tr>
<th:block th:each="_line_,_stat_ : ${check!=null?check:blankList5}">
<tr>
	<th>&nbsp;</th>
	<td align='center' colspan='2' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item1}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item1' th:value="${_line_.item1}">
	</td>
	<td align='center' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item2}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item2' th:value="${_line_.item2}">
	</td>
	<td align='center' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item3}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item3' th:value="${_line_.item3}">
	</td>
	<td align='center' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item4}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item4' th:value="${_line_.item4}">
	</td>
	<td align='center' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item5}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item5' th:value="${_line_.item5}">
	</td>
	<td colspan='2' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item6}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item6' th:value="${_line_.item6}">
	</td>
	<td colspan='2' class='soloInput'>
		<span th:if="${pdf}" th:text="${_line_.item7}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item7' th:value="${_line_.item7}">
	</td>
	<td class='soloInput' style='border-style:none solid solid solid;'>
		<span th:if="${pdf}" th:text="${_line_.item8}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item8' th:value="${_line_.item8}">
	</td>
	<td class='soloInput' style='border-style:none solid solid solid;'>
		<span th:if="${pdf}" th:text="${_line_.item9}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item9' th:value="${_line_.item9}">
	</td>
	<td class='soloInput' style='border-style:none solid solid solid;'>
		<span th:if="${pdf}" th:text="${_line_.item10}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item10' th:value="${_line_.item10}">
	</td>
	<td class='soloInput' style='border-style:none solid solid solid;'>
		<span th:if="${pdf}" th:text="${_line_.item11}"></span>
		<input th:if="${!pdf}" type='text' name='check[].item11' th:value="${_line_.item11}">
	</td>

</tr>
</th:block>
<tr th:if="${!pdf}">
<th>&nbsp;</th>
<td colspan='14' class="addButton" style="text-align: center;"><div onclick="addcheck(this)">+</div>
<script type="text/javascript">
function addcheck(element){
	var addTr=element.parentNode.parentNode;
	var tableEle=addTr.parentNode;
	var newElement=null;
	newElement=document.createElement("tr");
	newElement.innerHTML="	<th>&nbsp;</th>	<td align='center' colspan='2' class='soloInput'>				<input type='text' name='check[].item1' value=''>	</td>	<td align='center' class='soloInput'>				<input type='text' name='check[].item2' value=''>	</td>	<td align='center' class='soloInput'>				<input type='text' name='check[].item3' value=''>	</td>	<td align='center' class='soloInput'>				<input type='text' name='check[].item4' value=''>	</td>	<td align='center' class='soloInput'>				<input type='text' name='check[].item5' value=''>	</td>	<td colspan='2' class='soloInput'>				<input type='text' name='check[].item6' value=''>	</td>	<td colspan='2' class='soloInput'>				<input type='text' name='check[].item7' value=''>	</td>	<td class='soloInput' style='border-style:none solid solid solid;'>				<input type='text' name='check[].item8' value=''>	</td>	<td class='soloInput' style='border-style:none solid solid solid;'>				<input type='text' name='check[].item9' value=''>	</td>	<td class='soloInput' style='border-style:none solid solid solid;'>				<input type='text' name='check[].item10' value=''>	</td>	<td class='soloInput' style='border-style:none solid solid solid;'>				<input type='text' name='check[].item11' value=''>	</td>";
	tableEle.insertBefore(newElement,addTr);
}
</script>
</td>
</tr>
</table>
</form>
</body>
</html>

现在如果直接用 v-html 放到vue 中 会报错；报这个方法没有；

解决思路：

1.获取到后端返回的html

2.通过正则表达式 之后 截取script 中的 js 逻辑

3.获取body标签 之后创建一个 script 标签

4.把我们截取的 script中的代码放到我们创建的 script标签中

5.把script标签 放到body中

实现：
html部分：
html 复制代码 
 <div v-html="htmlData"></div>
vue js部分
javascript 复制代码 
export default {
data() {
    return {
      htmlData: ""
    }
  },
  mounted() {
   // 我是取的本地存储的 你换成后端返回的就行
    this.htmlData = localStorage.getItem('callbackHTML')
   // 正则匹配
    const regex = /<script type="text\/javascript">([\s\S]*?)<\/script>/g;
    // let result = regex.exec(this.htmlData)  //获取匹配到的数据
    // console.log(result);
    // let result0 = regex.exec(this.htmlData)[0] // 0是带<script 
type="text\/javascript"> 这个的
    // console.log(result);
   let result1 = regex.exec(this.htmlData)[1]// 1是不带<script type="text\/javascript"> 这个的 我们用1
    console.log(result1);
//创建script标签
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.text = result1
//插入到body中
    document.getElementsByTagName('body')[0].appendChild(script)
  },
}
result1打印结果：
浏览器展示script标签位置：

------------------------------------------------------end----------------------------------------------------------------------

相关推荐
q56731523几秒前
在 Bash 中获取 Python 模块变量列
开发语言·python·bash
阿伟来咯~10 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端15 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱18 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
许野平25 分钟前
Rust： 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
guai_guai_guai27 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨28 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
狂奔solar37 分钟前
yelp数据集上识别潜在的热门商家
开发语言·python
blammmp1 小时前
Java：数据结构-枚举
java·开发语言·数据结构
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解