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

news2024/11/13 9:07:02
效果图：

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

后端返回的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部分：
 <div v-html="htmlData"></div>
vue js部分 
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----------------------------------------------------------------------

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1990498.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PythonStudio 控件使用常用方式（十三）TScrollBox

PythonStudio 控件使用常用方式（十三）TScrollBox

PythonStudio是一个极强的开发Python的IDE工具&#xff0c;它使用的是Delphi的控件&#xff0c;常用的内容是与Delphi一致的。但是相关文档并一定完整。现在我试试能否逐步把它的控件常用用法写一点点&#xff0c;也作为PythonStudio的参考。 从1.2.1版开始&#xff0c;Python…
阅读更多...
(Qt) QThread 信号槽所在线程

(Qt) QThread 信号槽所在线程

文章目录 &#x1f481;&#x1f3fb;前言&#x1f481;&#x1f3fb;Code&#x1f481;&#x1f3fb;‍♂️Code&#x1f481;&#x1f3fb;‍♂️环境 &#x1f481;&#x1f3fb;当前线程信号&#x1f481;&#x1f3fb;‍♂️默认效果&#x1f481;&#x1f3fb;‍♂️Qt::…
阅读更多...
RTOS（7）队列

RTOS（7）队列

1.队列的理论知识 下面的结构体里包含了&#xff1a;头部指针&#xff0c;写指针&#xff0c;读指针&#xff0c;长度&#xff0c;项目大小&#xff0c;两个链表&#xff1b; 写队列的时候&#xff0c;写指针指向头部&#xff0c;写进去之后&#xff0c;itemsize&#xff0c;移…
阅读更多...
MySQL中的日志

MySQL中的日志

错误日志 错误日志是MySQL中最重要的日志之一默认是开启的&#xff0c;它记录了MySQL启动和停止时&#xff0c;以及入伍再运行过程中发发生任何严重错误时的相关信息&#xff0c;当数据库出现任何故障无法正常运行时可以查看此日志。 二进制日志 二进制日志记录了所有的DDL语…
阅读更多...
http跨域网络请求中的CORS(跨源资源共享) 那些事 -- HTTP跨域请求， chrome插件跨域请求使用详解， origin格式，origin通配符等

http跨域网络请求中的CORS(跨源资源共享) 那些事 -- HTTP跨域请求， chrome插件跨域请求使用详解， origin格式，origin通配符等

在我们进行网络应用开发的时候&#xff0c;如果用到了跨域网络请求&#xff0c;则不可避免的就会遇到http跨域网络请求 CORS的问题&#xff0c;今天就和大家来聊聊跨域网络请求中的CORS的那些事。 跨源资源共享&#xff08;CORS&#xff09; CORS 是一种基于 HTTP 头的机制&a…
阅读更多...
ISO26262-MBD-静态验证在V左的布局考量

ISO26262-MBD-静态验证在V左的布局考量

一、ISO26262-MBD-静态验证的迷惑 模型的开发方法&#xff08;Model-Based Design&#xff0c;MBD&#xff09;在汽车行业嵌入式软件开发中扮演着重要的角色&#xff0c;功能安全ISO26262要求对我们搭建的模型进行规范检查。合规检查我们可以借助第三方工具来实现静态检查&…
阅读更多...
基于Django的图书管理系统【万能模板框架可调整增加】

基于Django的图书管理系统【万能模板框架可调整增加】

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主框架介绍项目框架每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 框架介绍 Django是一个用于快速开发Web应用程序的高级Python开源框架。它遵循MVC…
阅读更多...
去除富文本框的边框

去除富文本框的边框

<style lang"scss" scoped>::v-deep .textareaDeep .el-textarea__inner {border: none !important;box-shadow: none !important;padding: 0px; }</style> //添加类名 <el-inputclass"textareaDeep"type"textarea":rows"…
阅读更多...
Go语言实现依赖注入

Go语言实现依赖注入

文章目录 前言依赖注入是什么依赖注入的好处是什么结构图应用程序上下文接口上下文管理器暴露的功能使用示例最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;欢迎来到我的博客&#xff0c;今天带领大伙使用Go语言实现依赖自动注入&#xff0c;我们不会使用其它的第三方库…
阅读更多...
域控安全：多种方式提取ntds.dit

域控安全：多种方式提取ntds.dit

ntdsutils.exe提取ntds.dit vssadmin提取ntds.dit vssown提取ntds.dit IFM ntds.dit: ntds.dit为AD的数据库&#xff0c;内容有域用户、域组、用户hash等信息&#xff0c;域控上的ntds.dit只有可以登录到域控的用户&#xff08;如域管用户、DC本地管理员用户&#xff09;可以…
阅读更多...
HexView 刷写文件脚本处理工具-基本功能介绍(一)-基本界面

HexView 刷写文件脚本处理工具-基本功能介绍(一)-基本界面

HexView主要可以显示不同文件格式的内容&#xff0c;包括Intel-HEX、Motorola S-record二进制文件或其他特定汽车制造商的文件格式。此外&#xff0c;它还可以执行多种数据处理操作&#xff0c;如校验和计算、签名生成、数据加密/解密或压缩/解压缩&#xff0c;甚至重新排列文件…
阅读更多...
ubuntu创建txt

ubuntu创建txt

点击模版 右键 输入下面代码 sudo gedit txt文档.txt 然后就可以右键新建文本文件了 解开权限 sudo chmod -R 777 /home/sjxy/CQ
阅读更多...
探索下一代互联网协议：IPv6的前景与优势

探索下一代互联网协议：IPv6的前景与优势

探索下一代互联网协议&#xff1a;IPv6的前景与优势 文章目录 探索下一代互联网协议&#xff1a;IPv6的前景与优势**IPv6 的特点****IPv6的基本首部****IPv6的地址****总结** 互联网的核心协议&#xff1a;从IPv4到IPv6 互联网的核心协议IP&#xff08;Internet Protocol&#…
阅读更多...
【Nacos无压力源码领读】(一) Nacos 服务注册与订阅原理

【Nacos无压力源码领读】(一) Nacos 服务注册与订阅原理

本文将详细介绍 Nacos 客户端在启动时进行自动注册原理, 以及Nacos服务器是如何处理客户端的注册与订阅请求的; 本文会附带源码解读, 但不会死抠每一行代码, 主要是梳理整个流程, 过程中的关键步骤, 都会由思维导图的形式展现出来; 如果在阅读过程中对文中提到的 SpringBoot …
阅读更多...
Comsol 弧形声学换能器声聚焦仿真

Comsol 弧形声学换能器声聚焦仿真

弧形声学换能器声聚焦是指将声波能量集中在弧形声学换能器的特定区域内&#xff0c;以实现更强的声场强度和分辨率。声聚焦在许多应用中非常有用&#xff0c;包括医学超声成像、声纳、声波聚焦破碎等领域。 弧形声学换能器的设计和优化可以通过以下几个因素来实现声聚焦&#…
阅读更多...
【网站项目】SpringBoot743中珠商城仓库管理系统

【网站项目】SpringBoot743中珠商城仓库管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
A股破新低后震荡盘整，后市如何演绎？

A股破新低后震荡盘整，后市如何演绎？

今天的A股&#xff0c;让人按耐不住了&#xff0c;你们知道是为什么吗&#xff1f;盘面上出现1个重要信号&#xff0c;一起来看看&#xff1a; 1、今天两市冲高回落&#xff0c;主力压盘、故意洗筹码的意图就更加明显了&#xff0c;一定要拿住&#xff01;地板上卖出的&#xf…
阅读更多...
《刚刚问世》系列初窥篇-Java+Playwright自动化测试-4-启动浏览器-基于Maven（详细教程）

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-4-启动浏览器-基于Maven（详细教程）

1.简介 上一篇文章&#xff0c;宏哥已经在搭建的java项目环境中添加jar包实践了如何启动浏览器&#xff0c;今天就在基于maven项目的环境中给小伙伴们或者童鞋们演示一下如何启动浏览器。 2.eclipse中新建maven项目 1.依次点击eclipse的file - new - other &#xff0c;如下…
阅读更多...
初阶数据结构5 排序

初阶数据结构5 排序

排序 1. 排序概念及运用1.1 概念1.2运用1.3 常见排序算法 2. 实现常⻅排序算法2.1 插⼊排序2.1.1 直接插⼊排序2.1.2 希尔排序2.1.2.1 希尔排序的时间复杂度计算 2.2 选择排序2.2.1 直接选择排序2.2.2 堆排序 2.3 交换排序2.3.1冒泡排序2.3.2 快速排序2.3.2.1 hoare版本2.3.2.2…
阅读更多...
学习c#-4语句 ，条件，循环

学习c#-4语句 ，条件，循环

代码&#xff1a; string name "小赵"; //条件判断 if (name "小赵") { Console.WriteLine("我是小赵"); } else { Console.WriteLine("我不是小赵"); } // switch条件判断 switch (name) { case "小…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023