多层级iframe下JS调用点击事件

embedded/2024/10/18 14:25:55/
javascript">//var  approval='accent_info'
// 获取所有的 span 元素  
var spans = top.frames[2].document.querySelector("#submitRequestDispatchDiv > iframe").contentDocument.getElementsByTagName('span');  // 遍历 span 元素  
for (var i = 0; i < spans.length; i++) {  var spanText = spans[i].textContent || spans[i].innerText; // 兼容不同的浏览器  // 检查 span 文本是否包含approval  if (spanText.includes(approval)) {  // 向上遍历 DOM 树,找到最近的 .list-group-item.row 元素  var listGroupItem = spans[i].closest('.list-group-item.row');  // 在这个 .list-group-item.row 元素内找到复选框并选中它  var checkbox = listGroupItem.querySelector('input[type="checkbox"]');  if (checkbox) {  checkbox.checked = true;  }  }  
}

        这段JS主要作用是,获取浏览器中第三个iframe中ID为 submitRequest DispatchDiv 的内嵌 iframe(至于为什么不直接获取内嵌的iframe,是因为内嵌的iframe是动态生成的),然后获取到所有的标签span,并判断文本是否等于approval的值,最后获取到标签所对应的复选框,勾选。

        iframe主要是做多页面嵌入,常用在一个页面包含多个标签的地方

<iframeid="inlineFrameExample"title="Inline Frame Example"width="300"height="200"src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

        src里为目标页面地址,在这种情况下,使用document是获取不到,指定的元素对象。

        top.frames[2]可以获取到第三个页面,top是获取当前浏览器窗口(或标签页)中所有框架(包括顶级窗口和所有嵌套的 iframe、frame)的集合中的第三个。

        document.querySelector("#submitRequestDispatchDiv > iframe")获取ID为submitRequestDispatchDiv的元素。

        contentDocument 它主要用于访问 <iframe> 或 <frame> 元素中的文档对象

        getElementsByTagName('span')获取span标签的对象

        var spanText = spans[i].textContent || spans[i].innerText 获取文本内容

        spans[i].closest('.list-group-item.row');  获取span的上一级元素


http://www.ppmy.cn/embedded/50720.html

相关文章

python IP 端口 socket tcp 介绍

IP 端口 介绍 1、IP IP地址是分配给网络设备上网使用的数字标签&#xff0c;它能够标识网络中唯一的一台设备 windows环境可以使用 ipconfig 来查看自己的iplinux环境可以使用 ifconfig 来查看自己的ip 2、端口 端口是传输数据的通道&#xff0c;每个操作系统上都有 65535个…

Linux和Windows(VS 2019)下安装使用Log4cpp日志库

目录 一、Log4cpp简介 二、Windows下的Log4cpp的安装 1、下载网址 2、解决方案 三、Vistual Studio中使用第三方库 1、拷贝对应下图路径下的include文件进入你的项目目录下面去&#xff0c;并将之前编译好的库文件也放在对应项目目录下面去。 2、打开你的项目&#xff0…

AndroidStudio无法新建Java工程解决办法

我用的 AS 版本是 Android Studio Giraffe | 2022.3.1 Build #AI-223.8836.35.2231.10406996, built on June 29, 2023 以往新建工程都是 New project >> Empty Activity &#xff0c; 有个选择 Java 还是 Kotlin 语言的选项&#xff0c; 之后会默认生成一个 MainActi…

[保姆级教程]uniapp实现底部导航栏

文章目录 前置准备工作安装HBuilder-X新建uniapp项目教程使用HBuilder-X启动uniapp项目教程 实现底部导航栏package.json中配置导航栏详细配置内容 前置准备工作 安装HBuilder-X 详细步骤可看上文》》 新建uniapp项目教程 详细步骤可看上文》》 使用HBuilder-X启动uniapp项…

SQL Server几种琐

SQL Server 中的锁类型主要包括以下几种&#xff0c;它们用于控制并发访问和数据一致性&#xff1a; 1. 共享锁&#xff08;Shared Lock&#xff0c;S 锁&#xff09;&#xff1a; - 用于读取操作&#xff08;如 SELECT 语句&#xff09;。 - 允许多个事务同时读取同一资…

使用MyBatisPlus进行字段的自动填充

使用MyBatisPlus进行字段的自动填充 需求场景 当我们往数据库里面插入一条数据&#xff0c;或者是更新一条数据时&#xff0c;一般都需要标记创建时间create_time和更新时间update_time的值&#xff0c;但是如果我们每张表的每个请求&#xff0c;在执行sql语句的时候我们都手…

前端RSA加解密(支持超长分段)

过程不复杂, 只是网上结合后端的RSA加解密资料参差不齐, 比较零散, 而且大多博文都是基于最原始的RSA加解密, 当加解密参数过长的时候, 会报[Message too long for RSA] 解决方案, 找了一圈, 都不大完整, 完整的又很复杂, 加了一堆方法, 看着都头疼! 其实加解密的本质都一样的,…

戏剧之家杂志戏剧之家杂志社戏剧之家编辑部2024年第14期目录

文艺评论 南戏瓯剧跨文化传播研究 陈晓东;高阳;许赛梦; 3-7 论互联网时代的戏剧传播与批评——以西法大剧社和南山剧社为例 邬慧敏; 8-10 “左手荒诞&#xff0c;右手温情”——《西西弗神话》在戏剧《第七天》中的接受探究 赵稳稳; 11-13 戏剧研讨《戏剧之家》投稿…