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

云龍網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,云龍網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為云龍上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的云龍做網(wǎ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頁面 
  
  
  
  
 
  
  
  
  
    
父頁面A
 
  
  
  
  
    打開b頁面 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
  
  
  
  
// B頁面 
  
  
  
  
 
  
  
  
  
    
父頁面B
 
  
  
  
  
     
  
  
  
  
 
 
 
 

首先我們在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í)候這種方式反而會占用多余的資源和帶寬，如果需要下載的是用戶自己生成的內(nèi)容或者內(nèi)容已經(jīng)返回到客戶端了，這時(shí)候能不經(jīng)過服務(wù)端而直接生成下載任務(wù)，能節(jié)省不少的資源和時(shí)間開銷。

一般來說前端實(shí)現(xiàn)的思路就是通過動態(tài)創(chuàng)建a標(biāo)簽，設(shè)置其download屬性，最后刪除a就好了，對于不是圖片的文件一般都可以下載，但是如果是圖片，有些瀏覽器會自動打開圖片，所以我們需要手動把它轉(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)系 趣談前端公眾號。

本文標(biāo)題：前端復(fù)盤: Iframe跨頁通信和前端實(shí)現(xiàn)文件下載
網(wǎng)頁地址：http://www.dlmjj.cn/article/dhighid.html