本文主要是介绍多层级iframe下JS调用点击事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
//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的上一级元素
这篇关于多层级iframe下JS调用点击事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
