因为笔者以前维护了几个比较老的项目是用jquery全家桶开发的，其中有些需求是须要跨页面交互和父子页面通讯，故借此总结一下。另外一块是前端实现文件下载功能，虽然方法不少，为了避免用重复造轮子，在此仍是总结一波，毕竟多页面下的应用场景仍是不少的。javascript
文章摘要
实现页面之间通讯的方法php
实现父子页面和子页面与子页面之间通讯的方法html
前端实现文件下载功能前端
因为本文介绍的主要仍是基于javascript，不涉及任何框架方面的问题（若是想研究vue，react，angular方面的技术问题，能够移步个人其余文章），因此让咱们用原生javascript来解决咱们上面提到的问题吧。vue
正文
1. 实现页面之间通讯的方法
虽然咱们使用postmessage也能够实现页面通讯，但这里咱们主要使用window.opener这个API，MDN对它的解释以下：java
The Window interface's opener property returns a reference to the window that opened the window using open().react
意思就是window提供的opener接口返回一个打开当前页面的页面的一个引用，换句话说，若是A页面打开B，那么B页面的opener将返回A。经过这种方式，咱们能够在A页面定义全局的方法挂载在window上，那么B页面就能够经过opener拿到A页面的方法从而控制A页面的行为。jquery
目前主流的浏览器对这个API支持的都比较好，因此咱们在大部分场景下能够考虑使用这个API。程序员
为了更方便的理解他的应用场景，咱们这里实现一个小功能：咱们定义两个页面，A，B，当A页面打开B页面的时候，用B页面改变A页面的背景色。代码以下：后端
// A页面<body> <h1>父页面A</h1> <a href="./b.html" target="_blank">打开b页面</a> <script> function changeColor(color) { document.body.style.background = color }</script></body>
// B页面<body> <h1>父页面B</h1> <script> window.opener.changeColor('blue')</script></body>
首先咱们在A页面里定义一个全局方法，当点击a标签跳转到新开的B页面时，B页面就是经过opener，调用A定义的changeColor，并传入参数给A页面，从而改变A页面的背景色。效果以下：
2.实现父子页面和子页面与子页面之间通讯的方法
父子页面这里主要针对iframe而言，即iframe和父页面以及iframe页面之间的通讯。好比下图：
咱们想实现父页面A操控子页面A，B，而且让子页面和父页面交互，这里咱们主要使用 iframe的
contentWindow
parent.window 经过contentWindow，咱们能够拿到iframe内部的方法和dom元素，进而能够操控iframe页面
首先咱们来看看父页面操控子页面的场景：父页面A调用子页面的方法传递一条数据，并并显示在子页面中：
// 父页面window.onload = function() { let iframe1 = $id('a1').contentWindow; // 控制子页面dom iframe1.document.body.style.background = "#000" iframe1.loadData({a: '1'})}
function $id(id) { return document.getElementById(id)}
// 子页面function loadData(data) { document.body.append(`父页面的数据数据${data.a}`)}
由上可知，父页面经过contentWindow拿到iframe的window对象从而向其传递数据并调用其方法。
一样，子页面也能够操控父页面：
// 父页面function $id(id) { return document.getElementById(id)}// 子页面parent.window.$id('bridge').innerHTML = '子页面操控父页面dom'复制代码
从代码能够看到，咱们使用parent.window拿到父页面的window，而后调用父页面提供的$id方法来操做父页面dom。
接下来咱们来解决子页面和子页面通讯的问题，其实方法在上面已经提到了，咱们能够把父页面做为一个桥梁，子页面A经过parent.window拿到父页面的window，进而能够获取另外一个子页面B的dom，这样咱们就可让子页面A操做子页面B了，反之也是同样的。
// 子页面Alet iframeBWin = parent.window.$id('a2').contentWindowiframeBWin.onload = function() { iframeBWin.document.getElementById('show').innerHTML = "来自子页面A的问候"}复制代码
由上面代码咱们能够知道，咱们经过parent.window来拿到子页面B进而实现和子页面B通讯的目的，经过这种方式，咱们能够实现不少有意思的东西。
注意，咱们所讨论的这些方法都是基于同域下的，其实实现跨域的方法也有不少，好比使用中间iframe实现桥接，经过设置window.domain将window提升到顶层等等，不过实现起来仍是有些坑的，不过大部分场景都能知足。
4.前端实现文件下载功能
对于下载文件来讲，大部分场景都是后端来实现，前端只需求请求接口就行了，可是有时候这种方式反而会占用多余的资源和带宽，若是须要下载的是用户本身生成的内容或者内容已经返回到客户端了，这时候能不通过服务端而直接生成下载任务，能节省很多的资源和时间开销。
通常来讲前端实现的思路就是经过动态建立a标签，设置其download属性，最后删除a就行了，对于不是图片的文件通常均可如下载，可是若是是图片，有些浏览器会自动打开图片，因此咱们须要手动把它转化为data:URLs或blob:URLs，基于这个原理，咱们能够用fileReader，也能够用fetch-URL.createObjectURL，这里通过大量测试我采用后者：
function download(url, filename) { return fetch(url).then(res => res.blob().then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); }))}
该方法传入一个文件的地址和但愿使用的文件名，这样，咱们就能优雅的使用它来实现下载了。
❤️爱心三连击
1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创做的动力。
2.关注公众号趣谈前端，进程序员优质学习交流群, 字节, 阿里大佬和你一块儿学习成长！
3.也可添加微信【Mr_xuxiaoxi】获取大厂内推机会。
本文分享自微信公众号 - 趣谈前端（beautifulFront）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。