JS夸頁(yè)面通信極簡(jiǎn)方案&純前端實(shí)現(xiàn)文件下載
由于筆者之前維護(hù)了幾個(gè)比較老的項(xiàng)目是用jquery全家桶開(kāi)發(fā)的，其中有些需求是需要跨頁(yè)面交互和父子頁(yè)面通信，故借此總結(jié)一下。另一塊是前端實(shí)現(xiàn)文件下載功能，雖然方法很多，為了不用重復(fù)造輪子，在此還是總結(jié)一波，畢竟多頁(yè)面下的應(yīng)用場(chǎng)景還是很多的。
文章摘要
- 實(shí)現(xiàn)頁(yè)面之間通信的方法
- 實(shí)現(xiàn)父子頁(yè)面和子頁(yè)面與子頁(yè)面之間通信的方法
- 前端實(shí)現(xiàn)文件下載功能
由于本文介紹的主要還是基于javascript，不涉及任何框架方面的問(wèn)題(如果想研究vue，react，angular方面的技術(shù)問(wèn)題，可以移步我的其他文章)，所以讓我們用原生javascript來(lái)解決我們上面提到的問(wèn)題吧。
正文
1. 實(shí)現(xiàn)頁(yè)面之間通信的方法
雖然我們使用postmessage也可以實(shí)現(xiàn)頁(yè)面通信，但這里我們主要使用window.opener這個(gè)API，MDN對(duì)它的解釋如下：
- The Window interface's opener property returns a reference to the window that opened the window using open().
意思就是window提供的opener接口返回一個(gè)打開(kāi)當(dāng)前頁(yè)面的頁(yè)面的一個(gè)引用，換句話說(shuō)，如果A頁(yè)面打開(kāi)B，那么B頁(yè)面的opener將返回A。通過(guò)這種方式，我們可以在A頁(yè)面定義全局的方法掛載在window上，那么B頁(yè)面就可以通過(guò)opener拿到A頁(yè)面的方法從而控制A頁(yè)面的行為。
目前主流的瀏覽器對(duì)這個(gè)API支持的都比較好，所以我們?cè)诖蟛糠謭?chǎng)景下可以考慮使用這個(gè)API。
為了更方便的理解他的應(yīng)用場(chǎng)景，我們這里實(shí)現(xiàn)一個(gè)小功能：我們定義兩個(gè)頁(yè)面，A，B，當(dāng)A頁(yè)面打開(kāi)B頁(yè)面的時(shí)候，用B頁(yè)面改變A頁(yè)面的背景色。代碼如下：
- // A頁(yè)面
- <body>
- <h1>父頁(yè)面A</h1>
- <a href="./b.html" target="_blank">打開(kāi)b頁(yè)面</a>
- <script>
- function changeColor(color) {
- document.body.style.background = color
- }
- </script>
- </body>
- // B頁(yè)面
- <body>
- <h1>父頁(yè)面B</h1>
- <script>
- window.opener.changeColor('blue')
- </script>
- </body>
首先我們?cè)贏頁(yè)面里定義一個(gè)全局方法，當(dāng)點(diǎn)擊a標(biāo)簽跳轉(zhuǎn)到新開(kāi)的B頁(yè)面時(shí)，B頁(yè)面就是通過(guò)opener，調(diào)用A定義的changeColor，并傳入?yún)?shù)給A頁(yè)面，從而改變A頁(yè)面的背景色。效果如下：
2.實(shí)現(xiàn)父子頁(yè)面和子頁(yè)面與子頁(yè)面之間通信的方法
父子頁(yè)面這里主要針對(duì)iframe而言，即iframe和父頁(yè)面以及iframe頁(yè)面之間的通信。比如下圖：
我們想實(shí)現(xiàn)父頁(yè)面A操控子頁(yè)面A，B，并且讓子頁(yè)面和父頁(yè)面交互，這里我們主要使用 iframe的
- contentWindow
- parent.window 通過(guò)contentWindow，我們可以拿到iframe內(nèi)部的方法和dom元素，進(jìn)而可以操控iframe頁(yè)面
首先我們來(lái)看看父頁(yè)面操控子頁(yè)面的場(chǎng)景：父頁(yè)面A調(diào)用子頁(yè)面的方法傳遞一條數(shù)據(jù)，并并顯示在子頁(yè)面中：
- // 父頁(yè)面
- window.onload = function() {
- let iframe1 = $id('a1').contentWindow;
- // 控制子頁(yè)面dom
- iframe1.document.body.style.background = "#000"
- iframe1.loadData({a: '1'})
- }
- function $id(id) {
- return document.getElementById(id)
- }
- // 子頁(yè)面
- function loadData(data) {
- document.body.append(`父頁(yè)面的數(shù)據(jù)數(shù)據(jù)${data.a}`)
- }
由上可知，父頁(yè)面通過(guò)contentWindow拿到iframe的window對(duì)象從而向其傳遞數(shù)據(jù)并調(diào)用其方法。
同樣，子頁(yè)面也可以操控父頁(yè)面：
- // 父頁(yè)面
- function $id(id) {
- return document.getElementById(id)
- }
- // 子頁(yè)面
- parent.window.$id('bridge').innerHTML = '子頁(yè)面操控父頁(yè)面dom'復(fù)制代碼
從代碼可以看到，我們使用parent.window拿到父頁(yè)面的window，然后調(diào)用父頁(yè)面提供的$id方法來(lái)操作父頁(yè)面dom。
接下來(lái)我們來(lái)解決子頁(yè)面和子頁(yè)面通信的問(wèn)題，其實(shí)方法在上面已經(jīng)提到了，我們可以把父頁(yè)面作為一個(gè)橋梁，子頁(yè)面A通過(guò)parent.window拿到父頁(yè)面的window，進(jìn)而可以獲取另一個(gè)子頁(yè)面B的dom，這樣我們就可以讓子頁(yè)面A操作子頁(yè)面B了，反之也是一樣的。
- // 子頁(yè)面A
- let iframeBWin = parent.window.$id('a2').contentWindow
- iframeBWin.onload = function() {
- iframeBWin.document.getElementById('show').innerHTML = "來(lái)自子頁(yè)面A的問(wèn)候"
- }復(fù)制代碼
由上面代碼我們可以知道，我們通過(guò)parent.window來(lái)拿到子頁(yè)面B進(jìn)而實(shí)現(xiàn)和子頁(yè)面B通信的目的，通過(guò)這種方式，我們可以實(shí)現(xiàn)很多有意思的東西。
注意，我們所討論的這些方法都是基于同域下的，其實(shí)實(shí)現(xiàn)跨域的方法也有很多，比如使用中間iframe實(shí)現(xiàn)橋接，通過(guò)設(shè)置window.domain將window提高到頂層等等，不過(guò)實(shí)現(xiàn)起來(lái)還是有些坑的，不過(guò)大部分場(chǎng)景都能滿足。
3.前端實(shí)現(xiàn)文件下載功能
對(duì)于下載文件來(lái)說(shuō)，大部分場(chǎng)景都是后端來(lái)實(shí)現(xiàn)，前端只需求請(qǐng)求接口就好了，但是有時(shí)候這種方式反而會(huì)占用多余的資源和帶寬，如果需要下載的是用戶自己生成的內(nèi)容或者內(nèi)容已經(jīng)返回到客戶端了，這時(shí)候能不經(jīng)過(guò)服務(wù)端而直接生成下載任務(wù)，能節(jié)省不少的資源和時(shí)間開(kāi)銷。
一般來(lái)說(shuō)前端實(shí)現(xiàn)的思路就是通過(guò)動(dòng)態(tài)創(chuàng)建a標(biāo)簽，設(shè)置其download屬性，最后刪除a就好了，對(duì)于不是圖片的文件一般都可以下載，但是如果是圖片，有些瀏覽器會(huì)自動(dòng)打開(kāi)圖片，所以我們需要手動(dòng)把它轉(zhuǎn)化為data:URLs或blob:URLs，基于這個(gè)原理，我們可以用fileReader，也可以用fetch-URL.createObjectURL，這里經(jīng)過(guò)大量測(cè)試我采用后者：
- 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);
- }))
- }
該方法傳入一個(gè)文件的地址和希望使用的文件名，這樣，我們就能優(yōu)雅的使用它來(lái)實(shí)現(xiàn)下載了。
