記一次老項目中的跨頁面通信問題和前端實現文件下載功能

  • 2019 年 10 月 6 日
  • 筆記

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

文章摘要

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

由於本文介紹的主要還是基於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);      }))  }

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

最後

由於筆者最近在寫開源的CMS系統，技術架構：

  • 後台Node+Koa+redis+JsonSchema
  • 管理後台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
  • 客戶端前台 react + antd + react-hooks + axios

VirMach 便宜 VPS

QNews

QNews