這篇文章主要介紹“實現(xiàn)頁面之間通信的方法教程”，在日常操作中，相信很多人在實現(xiàn)頁面之間通信的方法教程問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”實現(xiàn)頁面之間通信的方法教程”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

在龍山等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,外貿(mào)營銷網(wǎng)站建設(shè),龍山網(wǎng)站建設(shè)費用合理。

1. 實現(xiàn)頁面之間通信的方法

雖然我們使用postmessage也可以實現(xiàn)頁面通信，但這里我們主要使用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。

為了更方便的理解他的應(yīng)用場景，我們這里實現(xiàn)一個小功能：我們定義兩個頁面，A，B，當A頁面打開B頁面的時候，用B頁面改變A頁面的背景色。代碼如下：

// A頁面      
父頁面A
     打開b頁面        // B頁面      
父頁面B
      

首先我們在A頁面里定義一個全局方法，當點擊a標簽跳轉(zhuǎn)到新開的B頁面時，B頁面就是通過opener，調(diào)用A定義的changeColor，并傳入?yún)?shù)給A頁面，從而改變A頁面的背景色。效果如下：

2.實現(xiàn)父子頁面和子頁面與子頁面之間通信的方法

父子頁面這里主要針對iframe而言，即iframe和父頁面以及iframe頁面之間的通信。比如下圖：

我們想實現(xiàn)父頁面A操控子頁面A，B，并且讓子頁面和父頁面交互，這里我們主要使用 iframe的

• contentWindow

• parent.window 通過contentWindow，我們可以拿到iframe內(nèi)部的方法和dom元素，進而可以操控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'復(fù)制代碼

從代碼可以看到，我們使用parent.window拿到父頁面的window，然后調(diào)用父頁面提供的$id方法來操作父頁面dom。

接下來我們來解決子頁面和子頁面通信的問題，其實方法在上面已經(jīng)提到了，我們可以把父頁面作為一個橋梁，子頁面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的問候" }復(fù)制代碼

由上面代碼我們可以知道，我們通過parent.window來拿到子頁面B進而實現(xiàn)和子頁面B通信的目的，通過這種方式，我們可以實現(xiàn)很多有意思的東西。

注意，我們所討論的這些方法都是基于同域下的，其實實現(xiàn)跨域的方法也有很多，比如使用中間iframe實現(xiàn)橋接，通過設(shè)置window.domain將window提高到頂層等等，不過實現(xiàn)起來還是有些坑的，不過大部分場景都能滿足。

3.前端實現(xiàn)文件下載功能

對于下載文件來說，大部分場景都是后端來實現(xiàn)，前端只需求請求接口就好了，但是有時候這種方式反而會占用多余的資源和帶寬，如果需要下載的是用戶自己生成的內(nèi)容或者內(nèi)容已經(jīng)返回到客戶端了，這時候能不經(jīng)過服務(wù)端而直接生成下載任務(wù)，能節(jié)省不少的資源和時間開銷。

一般來說前端實現(xiàn)的思路就是通過動態(tài)創(chuàng)建a標簽，設(shè)置其download屬性，最后刪除a就好了，對于不是圖片的文件一般都可以下載，但是如果是圖片，有些瀏覽器會自動打開圖片，所以我們需要手動把它轉(zhuǎn)化為data:URLs或blob:URLs，基于這個原理，我們可以用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);     })) }

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

到此，關(guān)于“實現(xiàn)頁面之間通信的方法教程”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
當前標題：實現(xiàn)頁面之間通信的方法教程
網(wǎng)頁路徑：http://weahome.cn/article/gescjs.html