父页面js监听iframe内子页面并作出响应

本文介绍父页面监听iframe内子页面传出的事件并作出反应的方法
父页面使用原生js
子页面使用angular

要实现的效果：
1.父页面有一个input框和一个div，初始值都为0
2.子页面有两个button，add与reduce
3.点击后分别使父页面input框和div内的值+1与-1

页面效果如下

父页面html代码

<body><div>I'm Parent</div><input id="displayInput" type="text" value="0" /><div id="displayDiv">0</div><iframe id="myIframe" width="100%" height="600px" src="http://localhost:4200/"></iframe><script type="text/javascript" src="./parent.js"></script>
</body>

子页面html代码(本文子页面使用angular)

<h1>I'm Angular Module</h1>
<nav><a id="add" (click)="add()">Add</a><br><a id="reduce" (click)="reduce()">Reduce</a>
</nav>

可以看出，父html中通过iframe内嵌了子html

子页面js代码(本文子页面使用angular)
事件传到父页面使用window.parent.postMessage方法

//定义传递给父页面的对象
data:any = {}add(){//给对象赋值this.data['Data'] = 1;//将已赋值的对象传给父页面//参数一为要传递的参数，参数二为要传递到的目标window.parent.postMessage(data, "http://localhost:4200/assets/parent.html");
}reduce(){this.data['Data'] = -1;window.parent.postMessage(data, "http://localhost:4200/assets/parent.html");
}

父页面接收并响应的js代码
本文提供两种方法
首先获取到input和div的dom对象

let input = document.querySelector('#displayInput');
let div = document.querySelector('#displayDiv');

方法一

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){input.value = parseInt(input.value) + event.data.Datadiv.innerHTML = parseInt(div.innerHTML) + event.data.Data;
}

方法二

window.onload = function () {//添加监听事件if (typeof window.addEventListener != "undefined")window.addEventListener("message", func, false);//兼容不支持addEventLinstener的IEelse if (typeof window.attachEvent != 'undefined')window.attachEvent("onmessage", func);
}//接收到后调用次方法
function func(event) {input.value = event.data.Datadiv.innerHTML = event.data.Data;
}

点击add测试

点击reduce测试

父页面js监听iframe内子页面并作出响应相关推荐

js监听iframe是否加载完毕
js监听iframe是否加载完毕代码片. //初始化加载var a = document.getElementById(iframe的id);var iframeLoad = function () ...
php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
js监听iframe关闭_Node.js文档NET[翻译]
Node.js v12.0.0 Documentationnodejs.org Net模块提供一个异步的网络API,这个API可以创建基于流的TCP,或者IPC服务器(net.createServe ...
js监听用户关闭当前页面
只需要监听一个函数当然前提是你的dom树要挂载好了如果你是vue项目放在mounted里就好了 window.onbeforeunload = function(e) {debugger }
h5页面js监听页面失去焦点、获取焦点
小程序/uniapp等项目有onshow.onhide等生命周期. 其实在h5页面中对应的是页面激活.页面非激活状态. 应用场景: eg:在某h5页面需要连接websoket,页面激活状态建立连接,页 ...
JS监听页面元素删除子节点、增加子节点、修改子节点的内容
监听这个事件DOMSubtreeModified. 表示如果当前监听元素的子节点有改动:包括删除子节点.增加子节点.修改子节点的内容,都会触发这个事件. var container = documen ...
js监听浏览器tab页面变化
js监听浏览器tab页面变化引言今天写到一个需求,当用户离开当前页面的时候,需要关闭页面的一个功能,查找资料发现了这个指令,个人觉得很有用,记录下来... 直接上代码 mounted:(){thi ...
java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...

父页面js监听iframe内子页面并作出响应

父页面js监听iframe内子页面并作出响应相关推荐

最新文章

热门文章