iframe 元素

<iframe>元素遵守同源政策，只有当父窗口与子窗口在同一个域时，两者之间才可以用脚本通信。

document.getElementById

对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的 DOM 节点，然后使用contentWindow属性获得iframe节点包含的window对象。

 var iframe = document.getElementById("iframe");var iwindow = iframe.contentWindow;var idoc = iwindow.document;console.log("window：",iwindow);//获取iframe的window对象console.log("document：",idoc); //获取iframe的documentconsole.log("html：",idoc.documentElement);//获取iframe的htmlconsole.log("head：",idoc.head); //获取headconsole.log("body：",idoc.body); //获取body

打印结果如下：

window.frames[‘iframe’]

<iframe name="iframe" src="/admin/common/map/mineMap"></iframe>

给iframe设置name属性，通过window.frames[‘iframe']也可以说去子页面的DOM节点。

多窗口通信

窗口内部，使用window.parent引用父窗口。如果当前页面没有父窗口，则window.parent属性返回自身。因此，可以通过window.parent是否等于window.self，判断当前窗口是否为iframe窗口。

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self

具体可以通过下图加深理解：

子页面(iframe)向父页面发起通信

示例：

子页面：
setMapinfo(){var vm = parent.page;var  params = {"lng": self.lng,"lat": self.lat,"address": self.address};// 为父级页面返回信息vm.getMapInfo(params);
},父页面：
getMapInfo(point){if(point){this.form.lng = point.lng;this.form.lat = point.lat;}
},

子页面中取得数据，通过setMapinfo方法以参数的形式传给父页面中的getMapInfo

父页面向子页面(iframe)发起通信

示例：

<iframe id="liveview" name="liveview" src="/admin/videoSurveillance/index/getLiveVideo"></iframe>// 视频内容切换
onVideoChange(value){document.getElementById("liveview").contentWindow.window.page.getVideo(sbbh);// 等同于上面方法// window.frames[‘liveview'].window.page.getVideo(sbbh);
},

iframe页面使用Js实现父页面和子页面通信相关推荐

08﹑导航子页面切换功能5_实现导航栏子页面切换
08﹑导航子页面切换功能5_实现导航栏子页面切换
HTML框架IFrame结合JS在主页面和子页面间传值
下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数仅需 [ parent.window.你的函数 ] 就可以了 DOM方法: 父窗口操作IFRAME:window.frames ...
iframe父元素获取子页面的元素
父页面 <iframe src="iframe.html" id="iframeId" height="150" width=&quo ...
layui 父页面向弹出框中的子页面form表单进行赋值
1 ,父页面js layer.open({type: 2,title: '修改数据',shadeClose: false,shade: 0.8,area: ['60%', '60%'],content ...
vue.js：父组件向子组件传递数据props
笔记代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><meta na ...
vue.js：父组件和子组件
父组件和子组件 1.创建两个组件 const cpnC1 = Vue.extend({template:`<div><h2>我是标题1</h2><p>我 ...
JavaScript（js)节点--父节点、子节点、兄弟节点
JavaScript(js)节点–父节点子节点一般节点至少拥有nodeType(结点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType为1 ...
Vue组件（二）父组件、子组件通信/传值
一.Vue 父组件访问子组件 1.父组件获取子组件对象通过ref引用属性访问子组件对象定义: <StudentInfo :num="parentNum" ref=&quo ...
如何解析json并展示到html页面中,js解析json并生成html页面
issue.js中json格式: var issueList = [{ date : '201108', issues : [{ n : '5', t : '20110817', d : '../52 ...
java父窗口传值给子窗口_【赖国荣】js实现父窗口与子窗口传值
1.变量的定义与使用,条件语句,循环语句和数组的使用: 2.定义和使用对象:this语句的使用:isNaN,eval函数的使用: 4.类型转换函数parseInt,parseFloat使用: 5.打开 ...

iframe页面使用Js实现父页面和子页面通信