前端復盤: Iframe跨頁通信和前端實現文件下載

作者：徐小夕 2021-08-11 08:23:07

本文介紹的主要還是基于javascript，不涉及任何框架方面的問題(如果想研究vue，react，angular方面的技術問題，可以移步我的其他文章)，所以讓我們用原生javascript來解決我們上面提到的問題吧。

由于筆者2年前維護了幾個比較老的項目是用jquery全家桶開發的，其中有些需求是需要跨頁面交互和父子頁面通信，故借此總結一下。另一塊是前端實現文件下載功能，雖然方法很多，為了不用重復造輪子，在此還是總結一波，畢竟多頁面下的應用場景還是很多的。

[[416758]]

文章摘要

實現頁面之間通信的方法
實現父子頁面和子頁面與子頁面之間通信的方法
前端實現文件下載功能

由于本文介紹的主要還是基于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頁面的背景色。代碼如下：

// 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了，反之也是一樣的。

// 子頁面A 
let iframeBWin = parent.window.$id('a2').contentWindow 
iframeBWin.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); 
    })) 
}

該方法傳入一個文件的地址和希望使用的文件名，這樣，我們就能優雅的使用它來實現下載了。

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。

責任編輯：姜華來源：趣談前端

前端技術 iframe