三生有幸,一起复盘
关注并将「趣谈前端」设为星标
每天定时分享技术干货/优秀开源/技术思维
由于笔者2年前维护了几个比较老的项目是用jquery全家桶开发的,其中有些需求是需要跨页面交互和父子页面通信,故借此总结一下。另一块是前端实现文件下载功能,虽然方法很多,为了不用重复造轮子,在此还是总结一波,毕竟多页面下的应用场景还是很多的。
文章摘要
实现页面之间通信的方法
实现父子页面和子页面与子页面之间通信的方法
前端实现文件下载功能
由于本文介绍的主要还是基于javascript,不涉及任何框架方面的问题(如果想研究vue,react,angular方面的技术问题,可以移步我的其他文章),所以让我们用原生javascript来解决我们上面提到的问题吧。
正文
1. 实现页面之间通信的方法
虽然我们使用postmessage也可以实现页面通信,但这里我们主要使用window.opener这个API,MDN对它的解释如下:
The Window interface's opener property returns a reference to the window that opened the window using open().
意思就是window提供的opener接口返回一个打开当前页面的页面的一个引用,换句话说,如果A页面打开B,那么B页面的opener将返回A。通过这种方式,我们可以在A页面定义全局的方法挂载在window上,那么B页面就可以通过opener拿到A页面的方法从而控制A页面的行为。
目前主流的浏览器对这个API支持的都比较好,所以我们在大部分场景下可以考虑使用这个API。
为了更方便的理解他的应用场景,我们这里实现一个小功能:我们定义两个页面,A,B,当A页面打开B页面的时候,用B页面改变A页面的背景色。代码如下:
<