博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe父子页面通信
阅读量:5072 次
发布时间:2019-06-12

本文共 1600 字,大约阅读时间需要 5 分钟。

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

  1.父页面调用子iframe页面

   (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器

        document.getElementById('iframe_Id').contentWindow // contentWindow 不能省略

   (2)通过iframe的name直接获取子窗口的window对象

        iframe_Name.window    //window可以省略

   (3)通过window对象的frames[]数组对象直接获取子frame对象

        window.frames[0] 或者 window.frames["iframe_Name"]

 2.子iframe页面调用父页面

   (1)通过parent或top对象获取父页面的window对象

        parent.window 或者 top.window //window 可以省略

 3.主页面内兄弟iframe页面之间的相互调用

   (1)同域下各个iframe窗口之间的元素和方法可以共享

 4.父页面中检测子iframe的加载情况

   (1)子iframe的onload事件

if (window.attachEvent) {//IE10及以前版本        document.getElementById('Id').attachEvent('onload', function () {            mini.alert('IE');        }); } else if (window.addEventListener) {//所有主流浏览器除了IE10及以前版本        $('#Id')[0].addEventListener('load', function () {            mini.alert('ss');        }); }

   (2)使用定时器捕获子iframe的加载状态

var iFrm = document.getElementById('Id'); var fmState = function () {
if(document.readyState){//document.readyState用于判断文件是否加载完成,只读,firefox不支持 var state = iFrm.contentWindow.document.readyState; if(state == "complete"){ return;} window.setTimeout(fmState, 10); } } //在改变src或者通过form target提交表单时,执行语句: if (fmState.TimeoutI){ window.clearTimeout(fmState.timeoutI);} fmState.timeoutI = window.setTimeout(fmState, 400); 注释: 1.延迟400毫秒的原因?   答:因为javascript对DOM的操作是异步的,我们必须等待脚本对DOM落实执行后才开始下一步。   400秒这个数取决与客户端的设备和浏览器的响应速度,好的设备的响应速度能在10毫秒以内甚   至更快,但100毫秒左右可能比较大众化,400毫秒应该是十分保守的了。   总之,较大的毫秒数能适合更多的用户设备状况,并能减少了客户端设备的工作量。

 5.父页面中刷新子页面

   (1)document.getElementById().src=

二、跨域下父子页面的通信

  1.暂时未涉及待定

转载于:https://www.cnblogs.com/llljpf/p/7435526.html

你可能感兴趣的文章
Python-Web框架的本质
查看>>
QML学习笔记之一
查看>>
Window 的引导过程
查看>>
App右上角数字
查看>>
从.NET中委托写法的演变谈开去(上):委托与匿名方法
查看>>
小算法
查看>>
201521123024 《java程序设计》 第12周学习总结
查看>>
新作《ASP.NET MVC 5框架揭秘》正式出版
查看>>
IdentityServer4-用EF配置Client(一)
查看>>
WPF中实现多选ComboBox控件
查看>>
读构建之法第四章第十七章有感
查看>>
Windows Phone开发(4):框架和页 转:http://blog.csdn.net/tcjiaan/article/details/7263146
查看>>
Unity3D研究院之打开Activity与调用JAVA代码传递参数(十八)【转】
查看>>
python asyncio 异步实现mongodb数据转xls文件
查看>>
TestNG入门
查看>>
【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
查看>>
[ZJOI2007]棋盘制作 【最大同色矩形】
查看>>
IOS-图片操作集合
查看>>
模板统计LA 4670 Dominating Patterns
查看>>
团队项目开发客户端——登录子系统的设计
查看>>