原因私はjqueryの家族のバケットで開発する前に、保守プロジェクトに古いいくつかの、いくつかの要件は、ページや親子の対話型コミュニケーションページにまたがって必要なので、この要約を取るされています。他の一つは、マルチページや多くの中のすべてのアプリケーションシナリオの後、多くの方法が、ホイールを作成繰り返す必要がないようにするために、または波のこの概要では、フロントエンドの実装ファイルのダウンロード機能です。
アブストラクト
のページ間の通信の実装
サブページを持つ父と息子ページとサブページの間の通信の実装
フロントエンド実装ファイルのダウンロード機能
により、この記事の導入には、主にはJavaScriptに基づいて、任意のフレームワークを必要とする（あなたはVUEを勉強したい場合は、反応しません、技術的な問題会場の角側面ができ、私の他の記事は）ので、我々はそれを超えるような課題を解決するために、ネイティブのJavaScriptを使用してみましょう。
テキスト
- ページ間の通信の方法は
、以下のように、我々はのpostMessageページの通信を使用して達成することができますが、しかし、ここで私たちは主にこのAPIを使用しているwindow.opener、MDNはそれを説明します：
ウィンドウインタフェースのオープナープロパティが開いて使用して、ウィンドウを開いたウィンドウへの参照を返します（）。
それはオープナーウィンドウページがBを開いた場合、換言すれば、ページを開いて、現在のページへの参照を返すためのインタフェースを提供することを意味し、次にオープナーBのページは、Aが返され このように、私たちは窓の上にマウントするためにグローバルなアプローチを定義することができ、その後、Bメソッドは、オープナーによるページ缶のページは、ページの振る舞いページを制御するようになりました。
現在主流のブラウザでは、このためのより良いAPIをサポートしているので、ほとんどのシナリオでは、私たちは、このAPIを使用することを検討することができます。
彼のアプリケーションシナリオの理解を容易にするために、我々は小さな機能を達成するためにここにいる：ページがページを開いたときに我々は2つのページを定義し、A、B、Bは、我々はBページとページAの背景色を変更します。コードは以下の通りであります：
// A页面
<BODY>
<H1>父页面A </ H1>
<a href="./b.html" target="_blank">打开のB页面</a>の
<SCRIPT>
関数changeColor（色）{
document.body.style.background =カラー
}
</ SCRIPT>
</ BODY>
// Bのページ
の<body>
親ページB <の/ H1> <のH1>
<スクリプト>
window.opener.changeColor（ '青'）
</ SCRIPT>
</ body>の
コードをコピーして
第一に、私たちはグローバル・ページの方法Aを定義しますあなたが新しくオープンしたページBにジャンプするラベルをクリックすると、ページBには定義されchangeColorを呼び出し、オープナーを介して行われ、および背景色ページを変更するページにパラメータを渡します。結果は以下の通りであります：
サブページウェイと父と息子ページとサブページの間2.通信
主のiframeとiframeのページに、ここで親ページ間の通信の目的のために父と息子はiframeページ。たとえば、次の図：
私たちは、サブページA、B親ページの制御を達成したい、とインタラクティブ親ページとサブページを聞かせて、ここでは主にインラインフレームを使用
contentWindow
contentWindowによってparent.windowを、私たちは、DOM要素法と内部のiframeを得ることができ、かつ操作することができますiframeのページには、
データ転送方式のサブページの親ページへの呼び出し、およびサブページに表示される：最初に、我々は、サブページの親ページ操作のシーンを見てみましょう：
//親ページ
window.onload =関数（）{
ましょうiframe1 ID = $（ 'A1'）contentWindow ;.
@サブページコントロールのDOM
iframe1.document.body.style.background = "＃000"
iframe1.loadData（{ 」1' }）
}
関数$ ID（ID）{
リターンのdocument.getElementById（ID）
}
//サブページは
loaddataのは、（データ）{機能
document.body.append（ 父页面的数据数据${data.a}）
}
のコードをコピーして
、データが送信されてきたように、上記から親ページおよびcontentWindowによってはiframeのウィンドウオブジェクトを取得するために、そのメソッドを呼び出します。
同様に、サブページは、親ページを操作することができます。
//親ページ
関数$ ID（ID）{
戻りのdocument.getElementById（ID）
}
//サブページ
parent.window。$ ID（ 'ブリッジ' ）。InnerHTMLの= ' サブページコントロール親ページのDOM'
コードをコピーする
コードから我々は、ウィンドウparent.windowの親ページを取得するために使用して、親ページのDOMを操作するために提供します$ id方法の親ページを呼び出し、参照してください。
さて、実際には、すでに上記の方法で述べたように、私たちはブリッジとして親ページを置くことができ、parent.windowを通じて親ページを取得するには、ウィンドウをサブページの通信サブページとサブページの問題を解決してみましょう、とあなたは別の子を得ることができますDOMページB、我々が行うことができるように、サブページの操作Bをサブページ、およびその逆も同じ。
//サブページ
iframeBWin = parent.windowをしましょう。$のID（ 'A2'）。ContentWindow
iframeBWin.onload =機能（）{
iframeBWin.document.getElementById（ 'ショー'）。innerHTMLプロパティ= "Aのサブページからの挨拶"
}は、
コードをコピー
して、私たちは、このように、我々は面白いことをたくさん得ることができparent.windowサブページによる通信を実現するために、上記のコードは、我々は、オブジェクトサブページBとBを得ることを知っています。
我々が議論してきたこれらの方法は、同じドメインの下にある実際には、クロスドメインベースの方法は、このようなトップにウィンドウを上げるというように、だけでなく、いくつかを実装するためにwindow.domain設定することで、中間ブリッジはiframeを使用すると、多くがあることに注意してくださいピットが、シーンのほとんどは満たすことができます。
4.フロントエンド実装ファイルのダウンロード機能を
ファイルをダウンロードするには、シーンのほとんどがバックエンドを達成するためにある、ポイント側は、必要に応じてインターフェースが、うまく、時にはこのよう必要がありますが、余分なリソースと帯域幅を占有します要求を指し、ダウンロードは、ユーザー生成コンテンツやコンテンツがクライアントに返されており、サーバーなしでこの時間は直接ダウンロードタスクを生成することができ、資源と時間のオーバーヘッドを大幅に節約することができます。
一般的なアイデアのフロントエンドは、ラベルが作成したダイナミックを達成することである、そのプロパティをダウンロードし、そして最終的に画像ファイルのためなどを削除し、一般的にダウンロードすることはできませんが、絵場合、一部のブラウザでは、自動的に画像が開きますので、我々は、手動でデータにそれを配置する必要があります：URLまたはブロブ：URLを、この原理に基づいて、我々はFileReaderのを使用することができ、あなたはまた、フェッチURL.createObjectURL広範なテストは、私は後者を使用し、使用することができます。
ダウンロード機能（URL、ファイル名）{
リターンをFETCH（URL）.then（RES => res.blob（）を（BLOB => {。
せてA =のdocument.createElement（ 'A'）;
LET = window.URL URL。 createObjectURL（BLOB）;
a.href = URL;
a.download =ファイル名;
a.click（）;
window.URL.revokeObjectURL（URL）;
}））
}
のコードをコピー
着信アドレス及びファイルを使用することが望ま私たちは優雅なダウンロードを達成するためにそれを使用することができるように、ファイル名。
最後に、
著者は最近、オープンソースのCMSシステムで書いたので、技術的なアーキテクチャ：
背景ノード+興亜+のRedisの+ JsonSchemaの
管理背景インターフェースVUE-CLI3 +のVUE + TS + axios vuex + antd-VUEの+
クライアント受信が+ antd +反応-フック+反応 axiosを
後でシステムアーキテクチャの設計と実装を起動しますプロセス、に関する公開番号」何かを歓迎