操作iframe dom元素;监听子节点的变化

1、 不能跨域,如果跨域请配置代理或nginx,必须同源
 

 '/restcloud': {target: 'http://10.1.17.210:8080',changeOrigin: true,pathRewrite: {'^/restcloud': '/restcloud', // 这里可以省略,因为路径是一样的}}

或者

server {listen       8090;server_name  localhost;location / {proxy_pass   http://localhost:9103;  本地项目运行地址}location /restcloud/ {proxy_pass   http://*************/restcloud/;  代理的目标地址}location /res/ {proxy_pass   http://10.1.17.210:8080/res/;   代理的目标资源文件 我这边资源请求前缀是/res/}

2、操作

  const iframe = document.getElementById("myIframe");iframe.onload = function () {const iframeDocument = iframe.contentDocument;var dom1 = iframeDocument.getElementsByClassName("monitorlogo-w")[0];var dom2 = iframeDocument.getElementsByClassName("header-userInfo")[0];//点击dom1.click()//删除操作if (dom1) dom1.remove();if (dom2) dom2.remove();监听子 DOM 节点的变化var content = iframeDocument.getElementById("content");var observer = new MutationObserver(function (mutationsList, observer) {for (var mutation of mutationsList) {if (mutation.type === "childList") {let dom1 =iframeDocument.getElementsByClassName("monitorlogo-w")[0];let dom2 =iframeDocument.getElementsByClassName("header-userInfo")[0];var dom3List = iframeDocument.getElementsByClassName("header-content-right")[0].children;if (dom1) dom1.remove();if (dom2) dom2.remove();
//header-content-right的直接子节点中没有类名的 <span> 节点if (dom3List)for (var i = 0; i < dom3List.length; i++) {var child = dom3List[i];if (child.tagName.toLowerCase() === "span" &&!child.className) {child.remove();}}}}});// 配置观察选项var config = {childList: true, // 观察子节点的添加和删除attributes: true, // 观察属性的变化subtree: true, // 观察所有子节点};// 开始观察if (content) {observer.observe(content, config);}};

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI日记】24.11.17 看 GraphRAG 论文,了解月之暗面

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 核心工作 内容&#xff1a;看 GraphRAG 论文时间&#xff1a;4 小时评估&#xff1a;不错&#xff0c;继续 非核心工作 内容&#xff1a;了解国内大模型方向&#xff0c;重点了解了创业独角兽-月之暗面&…

数据结构查找-哈希表(开发地址法+线性探测法)+(创建+查找+删除代码)+(C语言代码)

#include<stdlib.h> #include<stdio.h> #include<stdbool.h> #define NULLKEY -1//单元为空 #define DELKEY -2//单元内容被删除 #define M 20 typedef struct {int key;//关键字int count;//统计哈希冲突探测次数 }HashTable; //插入到哈希表 void InsertHT…

vue el-date-picker 日期选择器禁用失效问题

当value-format"yyyy-MM-dd"的格式不要改为"yyyyMMdd"&#xff0c;否则会导致日期选择器禁用失效问题&#xff0c;因为该组件默认的格式就是yyyy-MM-dd。 <el-col v-for"(item, index) in formData" :key"index" ><el-date-…

〔 MySQL 〕数据类型

目录 1.数据类型分类 2 数值类型 2.1 tinyint类型 2.2 bit类型 2.3 小数类型 2.3.1 float 2.3.2 decimal 3 字符串类型 3.1 char 3.2 varchar 3.3 char和varchar比较 4 日期和时间类型 5 enum和set mysql表中建立属性列&#xff1a; 列名称&#xff0c;类型在后 n…

数据库审计工具--Yearning 3.1.9普民的使用指南

1 页面登录 登录地址:18000 &#xff08;不要勾选LDAP&#xff09; 2 修改用户密码 3 DML/DDL工单申请及审批 工单申请 根据需要选择【DML/DDL/查询】中的一种进行工单申请 填写工单信息提交SQL检测报错修改sql语句重新进行SQL检测&#xff0c;如检测失败可以进行SQL美化后…

Flutter网络通信-封装Dio

前言 dio 是一个强大的 Dart HTTP 请求库&#xff0c;支持全局配置、Restful API、FormData、拦截器、 请求取消、Cookie 管理、文件上传/下载、超时以及自定义适配器等。 Dio的pub地址为&#xff1a;dio | Dart package 封装要求 能够使用get、post、put、patch、delete、…

tcp 超时计时器

在 TCP&#xff08;传输控制协议&#xff09;中有以下四种重要的计时器&#xff1a; 重传计时器&#xff08;Retransmission Timer&#xff09; 作用&#xff1a;用于处理数据包丢失的情况。当发送方发送一个数据段后&#xff0c;就会启动重传计时器。如果在计时器超时之前没有…

[前端面试]HTML AND CSS

HTML html语义化标签的理解 是什么: 在布局页面的时候&#xff0c;根据内容的结构与含义&#xff0c;选择合适的带语义的html标签 如header&#xff0c;footer&#xff0c;nav&#xff0c;article&#xff0c;main&#xff0c;aside&#xff0c;h标签等 好处&#xff1a; 增…

前端(4)——demo分享

这两天需要用HTML、CSS和js简单组合一个html网页用于展示一些数据内容&#xff0c;这是我简单组合别人的一些文件形成的简单demo&#xff0c;大家也可以拿过去使用。 登录界面&#xff1a; 场景选择界面&#xff0c;有五个场景&#xff0c;每个场景中都需要展示一些特定的数据…

【企业级分布式系统】 Kafka集群

文章目录 KafkaKafka 概述使用消息队列的好处 Kafka 的特性Kafka 系统架构Kafka 的应用场景Kafka 的优缺点 Kafka 集群部署下载安装包安装 KafkaKafka 命令行操作Kafka 架构深入 FilebeatKafkaELK 部署指南~部署 ZookeeperKafka 集群部署 Filebeat部署 ELK&#xff08;Logstash…

高级java每日一道面试题-2024年11月07日-Redis篇-Redis有哪些功能?

如果有遗漏,评论区告诉我进行补充 面试官: Redis有哪些功能? 我回答: Redis 是一个开源的、基于键值对的 NoSQL 数据库&#xff0c;以其高性能、丰富的数据结构和多种功能而闻名。在高级 Java 面试中&#xff0c;了解 Redis 的核心功能和高级特性是非常重要的。以下是 Redi…

14天Java基础学习——第9天:异常处理机制

第9天 Java基础学习&#xff1a;异常处理机制 学习目标 在本日的学习中&#xff0c;我们将深入研究Java中的异常处理机制&#xff0c;包括以下几个方面&#xff1a; 异常与错误分类try-catch-finally语句throw与throws关键字自定义异常 一、异常与错误分类 Java中的异常主…

Java-空链处理

什么是 null 在 Java 中&#xff0c;null 是一个非常常见的关键字&#xff0c;用于表示“没有值”或“空”。然而&#xff0c;对于初学者来说&#xff0c;null 的本质可能会感到有些困惑。在本文中&#xff0c;我们将详细探讨 null 在 Java 中的含义和使用。 在 Java 中&…

PyTorch使用教程-深度学习框架

PyTorch使用教程-深度学习框架 1. PyTorch简介 1.1-什么是PyTorch ​ PyTorch是一个广泛使用的开源机器学习框架&#xff0c;特别适合深度学习的应用。它以其动态计算图而闻名&#xff0c;允许在运行时修改模型&#xff0c;使得实验和调试更加灵活。PyTorch提供了强大的GPU加…

网络爬虫 Python 第二课

BeautifulSoup 高级用法&#xff1a; 标签查找与筛选&#xff1a;除了简单地通过标签名查找&#xff08;如 soup.find(div) 查找第一个 div 标签&#xff09;&#xff0c;还可以利用属性来更精准地查找。例如&#xff0c;如果要查找所有 class 属性为 article 的 div 标签&…

供应链管理、一件代发系统功能及源码分享 PHP+Mysql

随着电商行业的不断发展&#xff0c;传统的库存管理模式已经逐渐无法满足市场需求。越来越多的企业选择“一件代发”模式&#xff0c;即商家不需要自己储备商品库存&#xff0c;而是将订单直接转给供应商&#xff0c;由供应商直接进行发货。这种方式极大地降低了企业的运营成本…

Pr:音频过渡

Adobe Premiere Pro 自带一组共三个音频过渡 Audio Transitions效果。 对音频剪辑之间应用交叉淡化 Crossfade过渡&#xff0c;操作方式类似于应用视频过渡效果。 对于交叉淡化&#xff0c;要保证前剪辑的出点之后及后剪辑的入点之前有足够的预留内容&#xff08;也称“手柄”&…

前端页面开发步骤详解

目录 前言1. 页面搭建1.1 HTML 标签结构1.2 CSS 样式设计 2. 数据绑定与事件处理2.1 数据绑定2.2 表单校验 3. 调用后台接口3.1 接口文档与工具封装3.2 参数传递与接口调用 结语 前言 在前端开发过程中&#xff0c;从页面搭建到与后台接口对接是一个必不可少的完整流程。无论是…

A037-基于Spring Boot的二手物品交易的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

两行命令搭建深度学习环境(Docker/torch2.5.1+cu118/命令行美化+插件),含完整的 Docker 安装步骤

深度学习环境的配置过于繁琐&#xff0c;所以我制作了两个基础的镜像&#xff0c;希望可以帮助大家节省时间&#xff0c;你可以选择其中一种进行安装&#xff0c;版本说明&#xff1a; base 版本基于 pytorch/pytorch:2.5.1-cuda11.8-cudnn9-devel&#xff0c;默认 python 版本…