JS夸页面通信极简方案
由于本文介绍的主要还是基于javascript，不涉及任何框架方面的问题(如果想研究vue，react，angular方面的技术问题，可以移步我的其他文章)，所以让我们用原生javascript来解决我们上面提到的问题吧。 正文1. 实现页面之间通信的方法虽然我们使用postmessage也可以实现页面通信，但这里我们主要使用window.opener这个API，MDN对它的解释如下：意思就是window提供的opener接口返回一个打开当前页面的页面的一个引用，换句话说，如果A页面打开B，那么B页面的opener将返回A。通过这种方式，我们可以在A页面定义全局的方法挂载在window上，那么B页面就可以通过opener拿到A页面的方法从而控制A页面的行为。 目前主流的浏览器对这个API支持的都比较好，所以我们在大部分场景下可以考虑使用这个API。 为了更方便的理解他的应用场景，我们这里实现一个小功能：我们定义两个页面，A，B，当A页面打开B页面的时候，用B页面改变A页面的背景色。代码如下下来我们来解决子页面和子页面通信的问题，其实方法在上面已经提到了，我们可以把父页面作为一个桥梁，子页面A通过parent.window拿到父页面的window，进而可以获取另一个子页面B的dom，这样我们就可以让子页面A操作子页面B了，反之也是一样的，我们所讨论的这些方法都是基于同域下的，其实实现跨域的方法也有很多，比如使用中间iframe实现桥接，通过设置window.domain将window提高到顶层等等，不过实现起来还是有些坑的，不过大部分场景都能满足。 3.前端实现文件下载功能对于下载文件来说，大部分场景都是后端来实现，前端只需求请求接口就好了，但是有时候这种方式反而会占用多余的资源和带宽，如果需要下载的是用户自己生成的内容或者内容已经返回到客户端了，这时候能不经过服务端而直接生成下载任务，能节省不少的资源和时间开销。
一般来说前端实现的思路就是通过动态创建a标签，设置其download属性，最后删除a就好了，对于不是图片的文件一般都可以下载，但是如果是图片，有些浏览器会自动打开图片，所以我们需要手动把它转化为data:URLs或blob:URLs，基于这个原理，我们可以用fileReader，也可以用fetch-URL.createObjectURL，这里经过大量测试 （编辑：牡丹江站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
