罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 247|回复: 0

js之iframe子页面与父页面通信

[复制链接]
发表于 2020-8-26 19:51:53 | 显示全部楼层 |阅读模式

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。

一、同域下父子页面的通信
父页面parent.html

  1. <html>
  2. <head>
  3.     <script type="text/javascript">
  4.         function say(){
  5.             alert("parent.html");
  6.         }
  7.         function callChild(){
  8.             myFrame.window.say();
  9.             myFrame.window.document.getElementById("button").value="调用结束";
  10.         }
  11.     </script>
  12. </head>
  13. <body>
  14.     <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
  15.     <iframe name="myFrame" src="child.html"></iframe>
  16. </body>
  17. </html>
复制代码



子页面child.html

  1. <html>
  2. <head>
  3.     <script type="text/javascript">
  4.         function say(){
  5.             alert("child.html");
  6.         }
  7.         function callParent(){
  8.             parent.say();
  9.             parent.window.document.getElementById("button").value="调用结束";
  10.         }
  11.     </script>
  12. </head>
  13. <body>
  14.     <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
  15. </body>
  16. </html>
复制代码


方法调用
父页面调用子页面方法:FrameName.window.childMethod();

子页面调用父页面方法:parent.window.parentMethod();

DOM元素访问
获取到页面的window.document对象后,即可访问DOM元素

注意事项
要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

二、跨域父子页面通信方法
如果iframe所链接的是外部页面,因为安全机制就不能使用同域名下的通信方式了。

父页面向子页面传递数据
实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:

1. 在子页面中通过setInterval方法设置定时器,监听location.href的变化即可获得上面的data信息

2. 然后子页面根据这个data信息进行相应的逻辑处理

子页面向父页面传递数据
实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

最新发表

[升平网络工作室]【打击黄赌毒】鱼塘边聚众赌博  罗田警方快速拘留五名涉赌人员

[升平网络工作室]关于延长电动自行车集中免费登记上牌期限的通告

[升平网络工作室]@湖北人!明年电价要调整

[升平网络工作室]【关注】湖北日报、湖北电视台等主流媒体深度报道罗田“四警”联动基层治理新模式

[升平网络工作室]紧急通知!符合新国标电动车随时上牌!

[升平网络工作室]罗田街头出现创意假“罚单” 创意过头 商家领真罚单

[升平网络工作室]今晚21:10 罗田人锁定江苏卫视看罗田

[升平网络工作室]【画重点】十九届五中全会,和青年的你息息相关!

[升平网络工作室]96110来电一定要接听!

[升平网络工作室]【百日会战】出租屋内开赌场  罗田警方再次端掉一赌博窝点行政拘留9人

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2020-12-2 16:58 , Processed in 0.118484 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表