javascript/jquery对Iframe的操作详解

最新推荐文章于 2025-10-11 16:32:08 发布

原创最新推荐文章于 2025-10-11 16:32:08 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #JavaScript #jQuery

前端专栏收录该内容

38 篇文章

订阅专栏

博主因网上相关介绍错误多且不直达痛点，决定自己撰写记录。提到父页面调用子页面元素时，需注意子页面是否加载完成，否则会报错。还创建了iframe1.html和iframe2.html两个测试页面进行说明。

前言及注意事项

背景:
在网上查阅了诸多相关介绍,大凡错误连篇或者是不能直达痛处;所以痛定思痛,自己写一篇相关记录,以备查用
注意事项

父页面调用子页面元素时,需要注意子页面是否加载完成,否则报错

测试结构说明

在这里插入图片描述
创建两个测试页面,iframe1.html和iframe2.html
内容分别如下:
iframe1.html

iframe2.html

总结及归纳

1.无论是父页面调用子页面,还是子页面调用父页面,思想可以简单的归纳如下:
     获取父/子Iframe元素-->获取其window对象-->从而调用其内容dom和方法
2.子页面调用父页面,基本无争议,网上相关资料也得到证实
3.父页面调用子页面存在很多问题,网上资料查阅很多不可靠:
	1):父调子元素:
		JavaScript:
		document.getElementById("#父iframe").contentWindow.document.getElementById("子dom")
		jQuery:
		也只能用contentWindow,$("元素id")[0],将jquery对象转换为JavaScript对象使用,至于为什么jQuery的load无法使用,和其contents无法调用到方法,经过我查阅api大概了解到,因为jQuery无法获取到url,所以不能load而报错;希望以后我能解决
4.反正父调用子的整体思路就是:
通过js获取子iframe-->然后使用jquery进行操作(因为使用js进行操作会莫名其妙的报错)```