在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的;
iframe通信可以分为2种,跨域和非跨域两种。分别说明。
有一点很重要,iframe是可以给名字属性的;给上名字属性可以省下一些代码;
//父页面
& lt;按钮类=" b " id=" b "祝辞点击& lt;/button>
& lt; iframe的src=" https://www.yisu.com/zixun/a.html " name='孩子' id=" f "祝辞& lt;/iframe>
& lt; script>
var ob=. getelementbyid (b);
var味精='嗨,我是你的父亲! !”
ob.onclick=function () {
如果(child.document.readyState==巴瓿伞?{
child.window.fnChild(味精);//关键
}
}
& lt;/script>//子页面
& lt; script>
函数fnChild (arg) {
console.log (arg);//确实得到了嗨,我是你的父亲! !
}
& lt;/script>
之前
父页面调用子页面使用childFrameName.window.fnName();;当然有一点很重要,你需要判断iframe里面的东西是否加载完成,如果加载未完成就调用的话是会报错的;
判断iframe加载是否完成有2种方法
1,childFrameName.document.readyState==巴暾崩磁卸?
2,childFrameName.onload=function(){}使用onload回调函数,把调用的方法都写在这个回调函数里面;
//在父页面
& lt; div id=癮”类=癮”祝辞& lt;/div>
& lt; iframe的src=" https://www.yisu.com/zixun/a.html " name='孩子' id=" f "祝辞& lt;/iframe>
& lt; script>
函数changeColor () {
var oDiv=. getelementbyid (' a ');
oDiv.style.backgroundColor=昂焐?
}
& lt;/script>//在子页面
& lt;按钮类=" ob "祝辞anniu
& lt; script>
函数c () {
parent.window.changeColor ();//关键
}
& lt;/script>
之前
同样的,在子页面调用父页面的方法使用parent.window.fnName()就可以了;
这种操作难免会遇到父页面获取子页面的元素,或者子页面获取父页面的元素进行操作,
首先,我们有几种方法拿到子页面的窗口对象或者doucument对象,(还是使用上面的html)
//原生js获取子页面窗口对象
1,var childWindow=. getelementbyid (f) .contentWindow;
2,var childWindow=document.getElementsByTagName (f) [0] .contentWindow;//其实也就是普通的获取方法,只是后面多了一个contentWindow;//jquery
var childWindow=$ (' # f ') .contentWindow;//获取子页面的文档对象(假设已经通过上面的方法得到了窗口对象)
var frameDoc=childWindow.document;
var frameBody=frameDoc.body;//jquery也是跟上面的一样
var frameDoc=$ (childWindow.document);//原生获取元素
childWindow.document.getElementById (a)//上面都已经拿到了子页面的窗口对象,所以获取子页面的元素也就只需要想普通操作那样获取就好
childWindow.document.getElementById .style (' a ')。颜色='红色'//改个颜色//金桥拿子页面元素
$ (" # f ') .contents (); (' # ');//$ (' # f”)。内容这相当于拿到了iframe里面所有的dom;
之前
//原生js
window.parent.document.getElementById (' a ');//window.parent获取到父页面的窗口对象,那么接可以使用一般操作获取元素
window.parent.document.getElementById (a) .style.color=昂焐?//dom操作//jquery
$ (" # ",parent.document);//$(父页面元素选择器,parent.document);
$ (" # ",parent.document)。css(“边界”,“1 px固体红”);
之前
上面的是不存在跨域的情况,但是有时候会遇到跨域情况,在这次的项目里面就是出于跨域状态下,开始看了一些资料,说是在用一个iframe做中间层去做,但是太麻烦,在这里介绍一个十分还用的方法postMessage
window.postMessage()方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机(两个页面的模数Document.domain设置为相同的值)时,这两个脚本才能相互通信.window.postMessage()方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。
以上摘自MDN原文postMessage;
otherWindow。postMessage(消息、targetOrigin[转]);//otherWindow窗口对象//消息传递的消息,可以是对象,可以是字符串//目标目标窗口,*代表所有;
