古いプロジェクトのページ間通信の問題とフロントエンドでファイルダウンロード機能を実現することを覚えます.
4010 ワード
筆者は以前,jqueryファミリーバケツを用いて開発されたいくつかの古いプロジェクトを維持してきたが,ページ間インタラクションと親子ページ通信が必要なニーズがあるため,まとめた.もう1つはフロントエンドでファイルダウンロード機能を実現することであり、方法は多いが、車輪を繰り返さないために、ここでまとめてみると、やはりマルチページの下でのアプリケーションシーンが多い.
本文の概要ページ間の通信を実現する方法親子ページとサブページとサブページ間の通信を実現する方法フロントエンドはファイルダウンロード機能を実現する本論文で紹介した主にjavascriptに基づいているため、フレームワークの問題には関与しない(vue,react,angularの技術問題を研究したい場合は、私の他の文章に移行することができる).原生javascriptで上記の問題を解決しましょう.
本文ページ間通信を実現する方法postmessageを用いてもページ通信を実現できるが、ここでは主にwindowを用いる.OpenerというAPI,MDNの解釈は以下の通りである: The Window interface's opener property returns a reference to the window that opened the window using open().
Windowsが提供するopenerインタフェースは、現在のページを開くページの参照を返します.言い換えれば、AページがBを開くと、BページのopenerはAを返します.このようにして、Aページでグローバルを定義する方法をwindowにマウントすることができ、BページはopenerがAページを取得する方法でAページの動作を制御することができる.
現在主流のブラウザはこのAPIをサポートしているので、ほとんどのシーンでこのAPIを使用することを考慮することができます.
彼の応用シーンをより便利に理解するために、私たちはここで小さな機能を実現します:私たちは2つのページを定義して、A,B、AページがBページを開く時、BページでAページの背景色を変えます.コードは次のとおりです.
//Aページ親ページA bページを開く<br>function changeColor(color) {<br>document.body.style.background = color<br>}<br>
//Bページ親ページB<br>window.opener.changeColor('blue')<br>まず、Aページでグローバルメソッドを定義し、aラベルをクリックして新しく開いたBページにジャンプすると、Bページはopenerを通じてA定義のchangeColorを呼び出し、パラメータをAページに入力し、Aページの背景色を変更します.効果は次のとおりです.
2.親子ページと子ページとの間の通信を実現する方法親子ページここでは、主にiframe、すなわちiframeと親ページ、およびiframeページとの間の通信について説明する.たとえば、次の図です.
親ページAが子ページA,Bを操作し、子ページと親ページを対話させることを実現したい.ここでは主にiframeのcontentWindowparentを使用する.WindowsはcontentWindowを通じて、iframeの内部の方法とdom要素を手に入れることができます.さらに、iframeページを操作することができます.まず、親ページが子ページを操作するシーンを見てみましょう.親ページAが子ページを呼び出す方法でデータを渡し、子ページに表示します.
//親ページwindow.onload=function(){let iframe 1=$id('a 1').contentWindow;//コントロールサブページdomiframe 1.document.body.style.background="#000"iframe 1.loadData({a:'1'})}
function $id(id) {return document.getElementById(id)}
//サブページfunction loadData(data){document.body.append(
同様に、サブページは親ページを操作することもできます.
//親ページfunction$id(id){return document.getElementById(id)}//子ページparent.window.$id('bridge').innerHTML='サブページ操作親ページdom'コードからparentを使用しています.Windowsは親ページのwindowを取得し、親ページが提供する$idメソッドを呼び出して親ページdomを操作します.
次に、サブページとサブページの通信の問題を解決します.実際には、親ページをブリッジとして、サブページAがparentを通過することができます.Windowsは親ページのwindowを取得し、さらに別のサブページBのdomを取得することができ、これによりサブページAにサブページBを操作させることができ、逆も同じである.
//サブページAlet iframeBWin=parent.window.$id('a2').contentWindowiframeBWin.onload=function(){iframeBWin.document.getElementById('show').innerHTML="サブページAからの挨拶"}上記のコードからparent.WindowsはサブページBを手に入れてサブページBと通信する目的を実現し、このようにすることで、私たちは多くの面白いものを実現することができます.
なお、我々が議論するこれらの方法はいずれも同ドメインの下に基づいているが、実際にはドメイン間を実現する方法も多く、例えば中間iframeを用いてブリッジを実現し、windowを設定することによって実現する.domainはwindowを最上位に上げるなどしていますが、実現するには穴がありますが、ほとんどのシーンは満足しています.
4.フロントエンド実装ファイルダウンロード機能はダウンロードファイルにとって、大部分のシーンはバックエンドで実現され、ポイントエンドは需要要求インタフェースを指すとよいが、このような方式はかえって余分な資源と帯域幅を占有することがあり、ダウンロードが必要なのはユーザー自身が生成した内容または内容がクライアントに戻った場合、この場合、サービス側を経由せずにダウンロードタスクを直接生成することができ、多くのリソースと時間のオーバーヘッドを節約することができます.
一般的にフロントエンドで実現する構想は、動的にaラベルを作成し、download属性を設定し、最後にaを削除すればよいということです.画像ではないファイルについては一般的にダウンロードできますが、画像であれば自動的に画像を開くブラウザもありますので、手を動かしてdata:URLsまたはblob:URLsに変換する必要があります.この原理に基づいて、file Readerを使用することができます.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-cli 3+vue+ts+vuex+antd-vue+axiosクライアントフロントreact+antd+react-hooks+axiosの後にこのシステムの設計思想、アーキテクチャと実現過程が発売されます.公衆番号「エピソード」
本文の概要ページ間の通信を実現する方法親子ページとサブページとサブページ間の通信を実現する方法フロントエンドはファイルダウンロード機能を実現する本論文で紹介した主にjavascriptに基づいているため、フレームワークの問題には関与しない(vue,react,angularの技術問題を研究したい場合は、私の他の文章に移行することができる).原生javascriptで上記の問題を解決しましょう.
本文
Windowsが提供するopenerインタフェースは、現在のページを開くページの参照を返します.言い換えれば、AページがBを開くと、BページのopenerはAを返します.このようにして、Aページでグローバルを定義する方法をwindowにマウントすることができ、BページはopenerがAページを取得する方法でAページの動作を制御することができる.
現在主流のブラウザはこのAPIをサポートしているので、ほとんどのシーンでこのAPIを使用することを考慮することができます.
彼の応用シーンをより便利に理解するために、私たちはここで小さな機能を実現します:私たちは2つのページを定義して、A,B、AページがBページを開く時、BページでAページの背景色を変えます.コードは次のとおりです.
//Aページ親ページA bページを開く<br>function changeColor(color) {<br>document.body.style.background = color<br>}<br>
//Bページ親ページB<br>window.opener.changeColor('blue')<br>まず、Aページでグローバルメソッドを定義し、aラベルをクリックして新しく開いたBページにジャンプすると、Bページはopenerを通じてA定義のchangeColorを呼び出し、パラメータをAページに入力し、Aページの背景色を変更します.効果は次のとおりです.
2.親子ページと子ページとの間の通信を実現する方法親子ページここでは、主にiframe、すなわちiframeと親ページ、およびiframeページとの間の通信について説明する.たとえば、次の図です.
親ページAが子ページA,Bを操作し、子ページと親ページを対話させることを実現したい.ここでは主にiframeのcontentWindowparentを使用する.WindowsはcontentWindowを通じて、iframeの内部の方法とdom要素を手に入れることができます.さらに、iframeページを操作することができます.まず、親ページが子ページを操作するシーンを見てみましょう.親ページAが子ページを呼び出す方法でデータを渡し、子ページに表示します.
//親ページwindow.onload=function(){let iframe 1=$id('a 1').contentWindow;//コントロールサブページdomiframe 1.document.body.style.background="#000"iframe 1.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を使用しています.Windowsは親ページのwindowを取得し、親ページが提供する$idメソッドを呼び出して親ページdomを操作します.
次に、サブページとサブページの通信の問題を解決します.実際には、親ページをブリッジとして、サブページAがparentを通過することができます.Windowsは親ページのwindowを取得し、さらに別のサブページBのdomを取得することができ、これによりサブページAにサブページBを操作させることができ、逆も同じである.
//サブページAlet iframeBWin=parent.window.$id('a2').contentWindowiframeBWin.onload=function(){iframeBWin.document.getElementById('show').innerHTML="サブページAからの挨拶"}上記のコードからparent.WindowsはサブページBを手に入れてサブページBと通信する目的を実現し、このようにすることで、私たちは多くの面白いものを実現することができます.
なお、我々が議論するこれらの方法はいずれも同ドメインの下に基づいているが、実際にはドメイン間を実現する方法も多く、例えば中間iframeを用いてブリッジを実現し、windowを設定することによって実現する.domainはwindowを最上位に上げるなどしていますが、実現するには穴がありますが、ほとんどのシーンは満足しています.
4.フロントエンド実装ファイルダウンロード機能はダウンロードファイルにとって、大部分のシーンはバックエンドで実現され、ポイントエンドは需要要求インタフェースを指すとよいが、このような方式はかえって余分な資源と帯域幅を占有することがあり、ダウンロードが必要なのはユーザー自身が生成した内容または内容がクライアントに戻った場合、この場合、サービス側を経由せずにダウンロードタスクを直接生成することができ、多くのリソースと時間のオーバーヘッドを節約することができます.
一般的にフロントエンドで実現する構想は、動的にaラベルを作成し、download属性を設定し、最後にaを削除すればよいということです.画像ではないファイルについては一般的にダウンロードできますが、画像であれば自動的に画像を開くブラウザもありますので、手を動かしてdata:URLsまたはblob:URLsに変換する必要があります.この原理に基づいて、file Readerを使用することができます.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-cli 3+vue+ts+vuex+antd-vue+axiosクライアントフロントreact+antd+react-hooks+axiosの後にこのシステムの設計思想、アーキテクチャと実現過程が発売されます.公衆番号「エピソード」