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

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')[].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.暂时未涉及待定

iframe父子页面通信的更多相关文章

  1. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  2. window.frames && iframe 跨页面通信

    1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...

  3. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. iframe父子页面调用小结

     子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法  (子页面同理,需将js方 ...

  5. iframe父子页面互调方法和属性

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...

  6. js和vue方法的相互调用(iframe父子页面的方法相互调用)。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  7. iframe父子页面js之间的调用

    父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...

  8. window.postMessage 在iframe父子页面数据传输

    介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...

  9. iframe 父子页面方法调用

    在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...

随机推荐

  1. Windows环境安装MySQL8.0.11

    网络开发数据库是必不可少的.曾经安装个Mysql,但是忘了.再次安装还是得百度.那还不如自己写篇博客记录一下呢,以后再忘记就看自己的博客好 Mysql官网安装地址(windows环境): https: ...

  2. spring boot通过自定义注解和AOP拦截指定的请求

    一 准备工作 1.1 添加依赖 通过spring boot创建好工程后,添加如下依赖,不然工程中无法使用切面的注解,就无法对制定的方法进行拦截 <dependency> <group ...

  3. 【软件工程】Beta冲刺(2/5)

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 新增修改用户信息.任务完成反馈等功能API 服务器后端部署,API接口的bet ...

  4. tp5 模型关联,多表联查实用方法

    1.模型中建立关联关系 public function goods(){ return $this->belongsTo('app\common\model\goods\Goods', 'goo ...

  5. Android APP切换到后台接收不到推送消息

    1.   Android端进程被杀死后,目前自带的保护后台接收消息活跃机制.暂时没有什么好的机制保持任何情况下都活跃 android原生系统用home键杀进程可以起来,如果是强行停止就只能用户自己手动 ...

  6. Appnium安装

    Refer to https://blog.csdn.net/xgh1951/article/details/85124327

  7. 使用pyinstaller 打包python程序

    1.打开PyCharm的Terminal,使用命令pip install pyinstaller安装pyinstaller 2.打包命令:pyinstaller --console --onefile ...

  8. leetcode25 K 个一组翻转链表

    这道题关于链表的操作,中间指针操作略复杂. /** * Definition for singly-linked list. * struct ListNode { * int val; * List ...

  9. UIGestureRecongnizer 手势拦截 对于特殊需求很有用

    手势其实也有代理方法的,通过代理方法可以做到更多关于手势方面的功能 比如在下面的方法中,如果是UIButton的点击就阻止手势的点击事件. // called before touchesBegan: ...

  10. AJAX异步对象,即XMLHttpRequest

    //创建AJAX异步对象,即XMLHttpRequest function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject(& ...