jQuery 父iframe与子iframe 相互调用传值

父页面中的iframe :如下

<iframe name="sunPage" id="sunPage" src="sun.html" width="300px" height="auto"></iframe>;
复制代码

1.父iframe 调用子iframe的方法

 $("#sunPage")[0].contentWindow.sunMethod();
复制代码

contentWindow 对象可以获取子iframe的window对象,兼容所有浏览器.

sunMethod() 这是子iframe中的方法名.

如果iframe的id不知道，比如用jbox 的open方法打开一个ifram.可以借助jquery的find方法找到iframe节点。

如：$(selector).find("iframe")[0].contentWondow.sunMethod();

2.父iframe 修改子iframe标签中的数据:如修改子iframe中的input的值.

 $('#sunPage').contents().find("#sunP").text("dsssssdd");
 jQuery contents() 方法: http://www.w3school.com.cn/jquery/traversing_contents.asp 介绍
 ID #sunP 是子iframe中的input的id;
复制代码

3.子iframe调用父iframe中的方法

 window.parent.daoYo("asdadasds");
 window.parent 直接调用window对象的parent
 daoYo("asdadasds"); 父页面的方法名,可传参数;
复制代码

4, 子iframe 修改父iframe标签中的数据:如修改父iframe中的input的值.

这个就不用说了.

 window.parent.$("#button3").text("ssssssssssss");复制代码

本次给大家推荐一个最后给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5bb775686fb9a05cdd2d1d91