溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2021-10-14 16:23:26 來源：億速云 閱讀：131 作者：iii 欄目：web開發(fā)

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

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接口返回一個打開當(dāng)前頁面的頁面的一個引用，換句話說，如果A頁面打開B，那么B頁面的opener將返回A。通過這種方式，我們可以在A頁面定義全局的方法掛載在window上，那么B頁面就可以通過opener拿到A頁面的方法從而控制A頁面的行為。

目前主流的瀏覽器對這個API支持的都比較好，所以我們在大部分場景下可以考慮使用這個API。

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

// A頁面 <body>     <h2>父頁面A</h2>     <a href="./b.html" target="_blank">打開b頁面</a>     <script>         function changeColor(color) {             document.body.style.background = color         } </script> </body>  // B頁面 <body>     <h2>父頁面B</h2>     <script>         window.opener.changeColor('blue') </script> </body>

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

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

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

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

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

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

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

我們想實現(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'復(fù)制代碼

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

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

接下來我們來解決子頁面和子頁面通信的問題，其實方法在上面已經(jīng)提到了，我們可以把父頁面作為一個橋梁，子頁面A通過parent.window拿到父頁面的window，進(jìn)而可以獲取另一個子頁面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進(jìn)而實現(xiàn)和子頁面B通信的目的，通過這種方式，我們可以實現(xiàn)很多有意思的東西。

實現(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標(biāo)簽，設(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)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手