使用iframe页面父子传参数

son.html

<button onclick="handleEvent()">向父页面发送信息</button>
<p>子页面</p>
<script>// 注册消息事件监听，接受子元素给的数据window.addEventListener('message', (e) => {console.log(e)console.log(e.data);}, false);function handleEvent() {// 向父页面发消息var a = 90var b =100window.parent.postMessage(a, '*');window.parent.postMessage(b, '*');}</script>

father.html

<div style="margin-bottom: 20px;"><button onclick="handleEvent()">向子页面发送信息</button>
</div>
<iframe src="son.html" id="iframe"></iframe>
<script>function handleEvent() {// iframe的idvar f = document.getElementById('iframe');// 触发子页面的监听事件f.contentWindow.postMessage('父页面发的消息', '*');}// 注册消息事件监听，接受子元素给的数据window.addEventListener('message', (e) => {console.log(e.data);}, false);
</script>

其中

window.parent.postMessage({"stateNum": stateNum ,"caseId": caseId }, 'http://xxxxx:8080');

otherWindow.postMessage(message, targetOrigin, [transfer]);

参数	说明
otherWindow	其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message	将要发送到其他 window的数据。
targetOrigin	指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
transfer	可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

使用iframe页面父子传参数相关推荐

html iframe 传递数据,iframe参数怎么传递参数到iframe页面
关于使用iframe跳转参数获取问题怎么把URL参数传递到B页面的iframe的C页面里? A页面打开一个B页面的链接,怎么把A页面的URL参数传递到B页面iframe的CA.html BB.htm ...
微信小程序跳转页面后onload中获取到的参数值和跳转页面时传的参数不一样
channel是一个从后端获取的被加密的一个字符串且已经被encode,我不对其进行修改,只在页面中跳转时带上这个参数,有接口需要传给后端这个参数时,传给他decodeURIComponent(cha ...
html cookie传参,页面间固定参数,通过cookie传值的实现方法
最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收.考虑到这样做会让url过长,因此,尝试使用cookie,把固定的值保存在coo ...
jsp页面之间传中文参数显示乱码问题的解决
jsp页面之间传中文参数显示乱码问题的解决参考文章: (1)jsp页面之间传中文参数显示乱码问题的解决 (2)https://www.cnblogs.com/sllzhj/p/9673628.htm ...
iframe之父子页面通信
文章目录 iframe之父子同源页面的通信 1.获取子页面的 window 对象 ----- `获取iframe节点的contentWindow属性` 2.子 iframe 获取父页面----- ...
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage 刚步入工作不久的小白,最近在做一个传感器网站项目的时候是用cookie存取数据,因为网站面向 ...
小程序：双向数据绑定、父子传参、上拉加载更多、如何使用vant
1.双向数据绑定单向绑定语法 1.普通的属性的绑定是单向的.例如: <input value="{{value}}" /> 解析: 如果使用this.setData( ...
[Flex][总结]从页面url获取参数
关于flex如何向某个页面传递参数,我以前有这方面的笔记,flex通过非AmfPHP途径与后台交互中URLLoader+URLRequest+URLVariables方法也可以用于向flex页面传参数 ...
iframe中父子窗口的调用
一.iframe标签详解 <iframe src="1.html" frameborder="0" id="child">< ...

使用iframe页面父子传参数

son.html

father.html

使用iframe页面父子传参数相关推荐

最新文章

热门文章