iframe页面事件，递归获取所有iframe

glgom

已于 2022-11-23 16:29:35 修改

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： iframe

于 2020-07-21 16:36:47 首次发布

本文链接：https://blog.youkuaiyun.com/glgom/article/details/106905821

javaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript递归获取网页中所有iframe元素的方法，并展示了如何为这些iframe元素添加点击事件监听器，以便在点击时进行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

递归获取子页面内的iframe；

function setMenuClick(){
		$(window).bind('click', function(e) {
			var e = e || window.event; //浏览器兼容性 
			var elem = e.target || e.srcElement;
			while (elem) {
				if (elem.id && (elem.id == 'nav_menu')) {
					return;
				}
				elem = elem.parentNode;
			}
			$(".nav_menu ul li").each(function(){
				$(this).attr("class","");
			});
		});
		
		var iframeList = [];
		var recursionIframe = function(doc){
			var iframeTemp = doc.getElementsByTagName("iframe");
			debugger;
			if(iframeTemp && iframeTemp.length>0){
				for(var k=0; k<iframeTemp.length; k++){
					var iframe = iframeTemp[k].contentDocument;
					iframeList.push(iframe);
					recursionIframe(iframe);
				}
			}
		}
		recursionIframe(document);
		for(var i=0; i<iframeList.length; i++){
			var iframe = iframeList[i];
			iframe.addEventListener('click', function(e) {
				debugger;
				var e = e || window.event; //浏览器兼容性 
				var elem = e.target || e.srcElement;
				while (elem) {
					if (elem.id && (elem.id == 'nav_menu')) {
						return;
					}
					elem = elem.parentNode;
				}
				$(".nav_menu ul li").each(function(){
					$(this).attr("class","");
				});
			});
		}
	}

页面获取ifram对象方式：

1.通过window.iframs

var frames = window.frames; // 获取当前window的所有iframe的对象

2.通过document.getElementsByTagName获取

var iframes = document.getElementsByTagName("iframe");