BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html5 on outbound embedded page 通信問題 (postMessage でクロスドメイン通信を解決)

2022-01-12 02:40:27

それは非常に簡単に言えば、あなたが直接クエリpostMessageプッシュとwindow.addEventListenerに行くことができる方法の使用を受信し、あなたが把握することができます最高の、この記事も方法の独自の使用の記録であります。
postMessage push と window.addEventListener receive を使用する。
原理を説明します。

(a) 送信者はpostMessageメソッドを使って受信者にメッセージをプッシュする。第1パラメータはプッシュの内容、第2パラメータはアクセスを許可するドメインである。

受信者は message メソッドをリスニングしてデータを受信する。

クロスドメインの実装には、ソースの異なる2台のサーバーが必要

開始

iframeでページを紹介しています（私はこう使っています）。

親ページ(送信者) 

<script>
// Here is the send listener
        function btnClick(params) {
            console.log(1111)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text : 'Did you receive the ah (daytime)',
                action : 'light' // action : custom action parameter for receiving the message is the judgment
             }, 'http://localhost:8000/#/');
           
        }
   
        function btnClick2(params) {
            console.log(2222)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text : 'Did you receive the ah (dark)',
                action : 'dark' // action : custom action parameter for receiving the message is the judgment
             }, 'http://localhost:8000/#/');
             
    // this is the listener to receive the return of the child page (at that time is also confused by various articles ah, if only the parent page to send messages do not need to receive feedback on the child page can not write these)
     window.addEventListener('message', function (e) {
            alert(e.data)
            const data = e.data;
            console.log(data,'Received your page now data')
        }) 
            // The following are all pitfalls that have been stepped on
            // var iwindow = iframe.contentWindow;
            // var idoc = iwindow.document;
            // console.log("window",iwindow);// get the window object of the iframe
            // console.log("document",idoc); // get the document of the iframe
            // console.log("html",idoc.documentElement);// get the html of the iframe
            // console.log("head",idoc.head); // get the head
            // console.log("body",idoc.body); // get body
            // console.log(window.frames['myframe'].window)
        }
    </script>
<body>
    <button onclick="btnClick()">click</button>
    <br/>
    <button onclick="btnClick2()">click</button>
 
    <iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width=" 1400px" height="800px">
</body>

送信に関する簡単な説明です。 

<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width=" 1400px" height="800px">

ここの中のsrcはサブページのアドレスです（ここでは自分で書いたルートや、そのページが書き込みを聞こうとするアドレスがベースになっています）。 

postMessage({ text:'Did you get it yet? (dark)', action : 'dark' }, 'http://localhost:8000/#/')

最初のパラメータはコンテンツ、2番目はサブページのアドレスで、ここにはプロジェクトのアドレスも書くことができます（例：postMessage('content', '')）、私は試していませんでしたが、またできるはずです。

サブページ(受信者＋フィードバック)

私の受信側は、私のbut reactプロジェクトに直接書かれています。 

 componentWillMount() {
    window.addEventListener('message', (e) => {
      console.log(e)
      let data= e.data //This is the data that was received
                       //e.origin which is the address of the data sent
   })
   
   ...
   ...
   ...
   //about feedback I wrote a click action to send in my project as follows
   goCustomerDetail=(data)=>{
    let url = data.url
            // window.top.postMessage({
            // text:'Return Url',
            // url:url
            // }, 'http://XXX:8083/ceshi/ceshi.html')
            
            window.top.postMessage('{"name":"Customer Details","path":"'+url+'"}', '*')
    }

上記でいただいたご意見について、説明の波が来ています。
1. 受信 window.addEventListener('message', (e) => {console.log(e) })
eは受信したメッセージの本文全体が内部に多くのコンテンツを持っている場合、自分で使用するデータを取る、いくつかの操作の後に条件を満たすために、ここで判断を追加する必要があることに注意してください
2は、方法を送信し、私自身の実験2つのフィードバックは、親ページが受け取ることができます
window.top.postMessageのフィードバックを使用していることに注意してください。

終了

要約：この方法は、まだ使用することは非常に良いですが、あなたは別の技術スタック通信エクストラネットすることができますが、セキュリティ面は非常に良いものではなく、必要性がクロスドメインの問題のデータ要求することはできません表示されますまたはインターフェイスは、あなたがアクセスし続けるために波を設定するには、独自のインターフェイスを開く必要があります傍受されています。

ボーナス：私は自分自身を使用していない導入の他の方法があり、共有するためのリンクを参照してください。

https://www.jianshu.com/p/fb579be635b2
https://www.cnblogs.com/Jry666/p/8418643.html
https://blog.csdn.net/monkindey/article/details/23659387

html5のこの記事は、送信埋め込みページの通信問題（クロスドメイン通信を解決するためにpostMessage）についてこのに導入され、より関連するhtml5の送信埋め込み通信コンテンツは、スクリプトハウス以前の記事を検索したり、次の関連記事を閲覧し続け、あなたが将来的に多くのスクリプトハウスをサポートして願っています！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します