iframe 页面嵌套
2024-09-05 10:33:35
由于目前项目基础界面,业务逻辑一样,只是细微有所差别。因而使用iframe来进行定制化处理。
如何来区分不同需求不同页面呢?
最初是想通过url
携带参数来进行区分,但是随着需求变多,定制化也越来越细微,若是再使用url进行处理,有些太累赘了。因而思量再三,开始使用postMessage
进行处理。
postMessage
- 满足跨域(不同域名间通信)
message
可以传递对象targetOrigin
可以指定哪些窗口接收信息
代码展示及描述
- 父向子传递信息
parent.html
- html
<iframe id="iframe" src="http://DOMAIN1.com/child.html"></iframe>
- js
const iframe = document.getElementByID('iframe')
const sendChildData = {
style: {
btn_color: '#fff'
}
}
// 默认只要是嵌套的页面都可以接收信息 *
iframe.contentWindow.postMessage(sendChildData, '*')
child.html
- html
<button id="btn">提交</button>
- js
window.addEventListener('message', function (e) {
if (!e.data) return
const { style } = e.data
const btn = document.getElementByID('btn')
btn.style.color = style.btn_color
}, false)
子向父传递参数
此处代码省略,简述实现原理
- 需要明确 谁 发送
postMessage
, 哪儿接受message
- 信息发给谁,谁就使用。在父向子时,需要找到
iframe
窗口;同理子向父,就需要找到父窗口window.parent
message
直接使用window.addEventListener('message', function () {}, false)
来进行处理即可
- 信息发给谁,谁就使用。在父向子时,需要找到
需要注意的一些问题
- 需要iframe加载完,才能发送信息,否者子元素无法获取到,推荐使用
window.onload
(因为onload是等所有资源加载才执行) - 由于并非是只有你一人使用
postMessage
,因而最好相互沟通,或者传入特定参数进行判断,不然接收多次数据,就有些凌乱了
使用iframe可以完成什么
- 常见的iframe逻辑触发,页面样式跟着改变,因而需要实时通知父元素,自己的高度。这在之前,更多地是使用
setInterval
定时去查询,但是多少总有些不好。而使用postMessage
便可以简化,事件触发就调用一下发送postMessage
事件 - 跨域通信,这个上面已有,就不细述
总结
- 使用时,尽量指定
origin
,这样安全些 - 鉴于使用
iframe
多少总有些安全顾虑,最新Google
新出了一个标签Portals
,只是目前还没有正式开始
最新文章
- nodejs学习之events的使用
- JavaScript学习12 JS中定义对象的几种方式
- php设计模式 观察者模式
- java变量和方法的覆盖和隐藏(翻译自Java Tutorials)
- ASP.NET MVC4学习笔记之Controller激活的扩展
- Random.Next 方法 (Int32, Int32)
- MAC终端配色Solarized
- 在编辑模式中一个ASP.NET应用详细视图显示集合属性 编辑模式和只读模式
- sdut 2840 Best string Orz~ (dp)
- 【转】开发者分享如何创造一款优秀的iOS游戏&mdash;&mdash;2013-08-25 17
- 简单的JQuery top返回顶部
- Linux 下防火墙端口设置
- C#中的DataTable简单使用Merge
- JS阻塞以及CSS阻塞
- js浮点数的加减乘除
- codeblock字体问题
- OSGI企业应用开发(十五)基于Spring、Mybatis、Spring MVC实现一个登录应用
- <;Android基础>;(一)
- C++笔试题2(基础题)
- [APP] Android 开发笔记 003-使用Ant Release 打包与keystore加密说明
热门文章
- JS框架_(JQuery.js)点赞按钮动画
- Unity3D_(网格导航)简单物体自动寻路
- Java基础__Java中异常处理那些事
- 第十四周课程总结 &; 实验报告
- mysql5.7.25搭建mysql-5.7.25.tar.gz包(亲验)
- DB2基础维护手册
- orcal 根据打分时间计算打分情况
- P5436 【XR-2】缘分
- CSS二级菜单
- TCP/IP,Http,Socket的区别