iframe父子页面通信
一、同域下父子页面的通信
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父子页面通信的更多相关文章
- iframe之父子页面通信
iframe之父子页面通信 1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...
- window.frames && iframe 跨页面通信
1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- iframe父子页面调用小结
子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法 (子页面同理,需将js方 ...
- iframe父子页面互调方法和属性
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...
- js和vue方法的相互调用(iframe父子页面的方法相互调用)。
项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...
- iframe父子页面js之间的调用
父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...
- window.postMessage 在iframe父子页面数据传输
介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...
- iframe 父子页面方法调用
在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.framebo ...
随机推荐
- 【零基础】彻底搞懂51单片机各种型号(ATMEL系列)
零.前言 初学者开始学习51单片机时往往先是一愣,说好51单片机啊,咋个型号是AT89C52,这个S52又是咋回事?上学的时候大都懵懵懂懂就这么用着,但始终没整明白,所以今天我们就彻底搞明白这些“51 ...
- Remote Ubuntu VM from Windows
Need to install the xrdp tool on Ubuntu. To do this, open a Terminal window (Ctrl + Alt + T) and ent ...
- 处理flutter http请求添加application/json报错Cannot set the body fields of a Request with content-type “application/json”
在flutter中在http请求发送时设置"content-type": "application/json"会出现报错Cannot set the body ...
- ELMO及前期工作 and Transformer及相关论文
论文1 https://arxiv.org/pdf/1705.00108.pdf Semi-supervised sequence tagging with bidirectional languag ...
- 一百一十八:CMS系统之短信验证码加密和js代码混淆
前面的方法存在安全隐患,只要知道发送短信验证码的接口就可以无限触发发送短信验证码 改用post请求,在前端加scrf_token验证,后面需要使用到md5加密,引入md5 from apps.form ...
- tensorflow安装过程-(windows环境下)---详解
一, 前言:本次安装tensorflow是基于Python的,安装Python的过程不做说明(既然决定按,Python肯定要先了解啊):本次教程是windows下Anaconda安装Tensorflo ...
- 分布式存储ceph介绍(1)
一.Ceph简介: Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展.在国内一些公司的云环 ...
- <linux-sed> sed基本用法
1.简介 sed全称是Stream Editor,是非交互式的编辑器.它不会修改原文件,除非使用shell重定向来保存结果, 或者可以指定-i选项来在线修改文件,这样就会改变原文件,升级脚本通常用-i ...
- python 实例方法、类方法和静态方法
#!/usr/bin/env python3.6 #-*- coding:utf-8 -*- # class Person(object): city = 'Beijing' def __init__ ...
- java web 能够实现整个文件夹的上传下载吗?
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...