前端复盘: iframe跨页通信和前端实现文件下载

三生有幸，一起复盘

关注并将「趣谈前端」设为星标

每天定时分享技术干货/优秀开源/技术思维

由于笔者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页面的背景色。代码如下：

<