vue中v-html 后端返回html + script js中click事件不生效
效果图：
需求：点击加号执行后端返回的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> </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> </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> </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> </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> </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> </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"> 这个的 我们用1console.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----------------------------------------------------------------------
相关文章：
vue中v-html 后端返回html + script js中click事件不生效
效果图： 需求：点击加号执行后端返回的script中的代码 后端返回的html： <!DOCTYPE html> <html langzh> <head> <title>xxx</title> <style>body{font-size: 14px}p{text-indent: 30px;}textarea{width…...
介绍maven生命周期-水温
Maven生命周期是指一系列的构建阶段，包括项目的清理、编译、测试、打包、部署等。Maven通过定义生命周期来规范项目构建过程，使得开发人员可以方便地执行一系列的构建任务。 Maven的生命周期分为三个阶段： clean生命周期：主要用…...
spring boot3.x快速入门
下一篇：Spring Boot 3.x gradle脚手架工程build.gradle详解 本教程将基于gradle项目构建工具来快速构建一个spring boot 3.x的最简单的web应用，其中涉及各种构建技巧和细节，希望能帮到初学者~ 文章目录 先决条件JDK17gradle全局配置 gradle项…...
JavaWeb之servlet关于Ajax实现前后端分离
一、什么是Ajax: AJAX Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部…...
vue3表格组件formatter
有时候在网页上显示表格数据时，表格的某些列值只有有限数目（例如，启用/停用），这时候后端常常使用不同的数据值表示不同状态，前端怎么将这些数据值转化为相应的列值呢？ 我们可以采用vue3表格组件…...
C# 使用NHibernate连接MySQL实现数据的增删改查
使用 NHibernate 连接 MySQL 并实现数据的增删改查操作是一个非常典型的场景。以下是一个简单的示例，演示了如何配置 NHibernate 与 MySQL 连接并进行基本的 CRUD 操作。 目录 步骤 1: 安装必要的包 步骤 2: 配置 NHibernate 配置文件方式 代码方式 步骤 3: 定…...
IDEA2024.2重磅发布，更新完有4G！
JetBrains 今天宣布了其 IDE 家族版本之 2024.2 更新，其亮点是新 UI 现在已是默认设置，并且对 AI Assistant （AI助手）进行了几项改进。 安装密道 新 UI 的设计更加简约，可以根据需要以视觉方式扩展复杂功能。值得开发…...
QWT+Qt Creator+MSVC的配置与使用
目录 一、介绍 二、QWT下载 三、QWT编译 3.1 设置构建套件 3.2 修改QWT相关文件 3.3 进行QWT编译 四、QWT配置 4.1 配置QWT的lib文件 4.2 配置QWT的dll文件 4.3 配置QWT的designer的dll文件 五、代码实验 一、介绍 QWT，全称是Qt Widgets for Technical…...
Netty高性能数据结构
文章目录 Netty高性能数据结构FastThreadLocalHashedWheelTimer时间轮Mpsc无锁队列 Netty高性能数据结构 Netty 用高性能数据结构的主要目的是为了提高网络通信的效率和系统的整体性能。 所谓的高性能数据结构是指，那些在特定场景下优化了性能和效率的数据结构&am…...
关于百度、微软语音合成的实现案例
关键词 自助机产品、排队呼叫功能、网络喇叭、百度语音合成SDK、微软TTS 阅读建议 对自助机产品功能扩展感兴趣的读者、需要实现远程语音呼叫功能的开发者、想要了解网络喇叭选型及其使用的技术人员、对百度语音合成SDK和微软TTS感兴趣的开发者 阅读时长 预计阅读时长…...
二叉树：镜像树,子结构,二叉树转链表,二叉树的倒数K个数,对称，Z型打印
1.把一棵二叉树转换为它的镜像树。 void mirror_tree(TreeNode *root) {if(rootNULL) return ;TreeNode *temproot->right;root->rightroot->left;root->lefttemp;mirror_tree(root->right);mirror_tree(root->left);}2、输入两棵二叉树A，B&…...
瑞秋，詹妮弗·安妮斯顿多年来与本·阿弗莱克保持着“调情”友谊 又一个詹妮弗
尽管所有迹象都表明本阿弗莱克和詹妮弗洛佩兹的婚姻即将走向离婚，但他尚未公开评论此事。不过，好莱坞圈内人士已经纷纷将他与另一位名人联系起来。事实上，是另一位詹妮弗。 一位消息人士向媒体透露，詹妮弗安妮斯顿和阿弗莱克一直都很有默契——无论是在银幕上还是在银幕外…...
指纹失效，忘记iPhone屏幕解锁密码怎么应对？
为保证手机的安全及隐私，我们会给手机设置屏幕锁屏密码，通过输入设置密码来解锁手机屏幕锁，但为了给大家提供快速便捷的解锁方式，苹果公司提供了指纹解锁，不仅解锁更便捷了还极大地增强了设备的安全性。但有时我们手指…...
09.XSS跨站脚本攻击（超详细！！！）
1、什么是XSS XSS（跨站脚本攻击）：攻击者利用这个漏洞将恶意脚本注入到网页中，当其它用户浏览这些页面时，恶意脚本会在用户的浏览器中执行。XSS攻击允许攻击者在用户的浏览器上执行脚本，从而可能获取用户的…...
讲解人工智能在现代科技中的应用和未来发展趋势-水文
人工智能（Artificial Intelligence，简称AI）是一种模拟人类智能的科技领域，它通过计算机模拟人类的思维、学习、推理和决策能力，以便解决复杂的问题。近年来，人工智能技术的发展取得了惊人的进展，…...
2.2 QT 环境配置
2.2 QT环境配置 QT是一个1991年由QT Company开发的跨平台C图形用户界面应用程序开发框架。它既可以开发GUI程序，也可以用于开发非GUI程序，比如控制台工具和服务器。Qt是面向对象的框架，使用特殊的代码生成扩展（称为元对象编译器&…...
2.类和对象（上）
1. 类的定义 1.1 类定义格式 • class为定义类的关键字，Stack为类的名字，{ }中为类的主体，注意类定义结束时后面分号不能省略。类体中内容称为类的成员：类中的变量称为类的属性或成员变量; （类和结构体非常像&#…...
【实际案例】服务器宕机情况分析及处理建议
了解银河麒麟操作系统更多全新产品，请点击访问麒麟软件产品专区：https://product.kylinos.cn 服务器环境以及配置 物理机/虚拟机/云/容器 物理机 外网/私有网络/无网络 私有网络 处理器： Kunpeng 920 内存： 4 TiB BIOS版…...
Linux系统之ncdu命令的基本使用
Linux系统之ncdu命令的基本使用 一、ncdu命令命令介绍1.1 ncdu简介1.2 ncdu特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统镜像源3.4 更新软件列表 四、安装ncdu工具4.1 安装ncdu软件4.2 n…...
STM32L051K8U6-HAL-LED闪烁设计
HAL三步法： 1、配置下载线 2、配置晶振 3、配置时钟 注意：中断优先级（这里防止HAL_Delay卡死，详细请看 http://t.csdnimg.cn/NQhQV） 4、 配置灯引脚属性为输出模式。并设置标签为LED 生成代码：编写while里…...
JavaScript中全局执行上下文与函数上下文的生成过程
全局执行上下文在JS引擎启动时创建，函数执行上下文在每次调用时创建；前者作用域链仅含全局环境，后者在创建阶段就基于定义位置固定作用域链；var和function声明被提升并初始化，let/const仅注册于词法环境而处于暂时性死…...
如何快速配置AI自瞄系统：面向游戏爱好者的完整指南
如何快速配置AI自瞄系统：面向游戏爱好者的完整指南 【免费下载链接】RookieAI_yolov8 基于yolov8实现的AI自瞄项目 AI self-aiming project based on yolov8 项目地址: https://gitcode.com/gh_mirrors/ro/RookieAI_yolov8 还在为FPS游戏中的精准瞄准而烦恼吗…...
TabNine终极指南：如何利用AI代码补全彻底改变你的开发体验
TabNine终极指南：如何利用AI代码补全彻底改变你的开发体验 【免费下载链接】TabNine AI Code Completions 项目地址: https://gitcode.com/gh_mirrors/ta/TabNine 在当今快节奏的软件开发世界中，效率是每个开发者追求的核心目标。TabNine作为一款…...
智能散热管理终极指南：风扇转速优化与系统温控曲线定制全解析
智能散热管理终极指南：风扇转速优化与系统温控曲线定制全解析 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tren…...
基于ruoyi-flowable-plus与vform的审批流程动态审批人配置实战
1. 动态审批人配置的核心思路 在传统审批流程中，审批人通常是固定配置的，比如直接指定某个角色或具体人员。但在实际业务中，我们经常需要根据流程发起人的组织关系动态确定审批人。比如最常见的场景：需要由发起人的直属上级或部门…...
Scrapy框架突破中国裁判文书网多重反爬机制的Python爬虫解决方案
Scrapy框架突破中国裁判文书网多重反爬机制的Python爬虫解决方案 【免费下载链接】Wenshu_Spider :rainbow:Wenshu_Spider-Scrapy框架爬取中国裁判文书网案件数据(2019-1-9最新版) 项目地址: https://gitcode.com/gh_mirrors/wen/Wenshu_Spider 在司法数据挖掘与法律科技…...
Postman便携版：Windows免安装API开发工具的新选择
Postman便携版：Windows免安装API开发工具的新选择 【免费下载链接】postman-portable 🚀 Postman portable for Windows 项目地址: https://gitcode.com/gh_mirrors/po/postman-portable 在现代API开发流程中，开发者常常面临工具安装繁…...
STM32F0实战：基于HAL库开发【4.6】
21.2 USB模块STM32F0072VBT6微控制器片内集成有符合USB2.0全速设备技术规范要求的USB模块，通过该模块可以实现与PC主机的USB通信连接，进一步拓展将该系列微控制器的应用范围。21.2.1 USB模块的结构STM32F072VBT6微控制器片内集成的USB模块，可…...
OpenClaw安全防护：千问3.5-9B操作权限最佳实践
OpenClaw安全防护：千问3.5-9B操作权限最佳实践 1. 为什么需要关注OpenClaw的安全配置 去年冬天的一个深夜，我被一阵急促的键盘敲击声惊醒。走进书房时，发现OpenClaw正在疯狂删除我的项目文件夹——原来是我白天测试时忘记限制文件删除权限&…...
SeqGPT-560M快速部署：阿里云ECS+双卡4090+Docker一键运行指南
SeqGPT-560M快速部署：阿里云ECS双卡4090Docker一键运行指南 1. 项目简介 SeqGPT-560M是一个专门为企业级信息抽取需求定制开发的高性能AI系统。与常见的聊天对话模型不同，这个系统专注于一件事：从非结构化文本中精准提取关键信息。 想象一…...