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