Vue埋め込みiframe

Vueにiframeと通信を内蔵
メッセージインタラクション方式
親から子へのメッセージ:iframeEl.contentWindow.PostMessage子受信親メッセージ:window.addEventListener(message)子は親にメッセージを伝えます:window.parent.PostMessage親受信子メッセージ:window.addEventListener(‘message’)
インスタンス-html:
parent.html

	//       
    var sendMessage = function(msg) {
        // msg   string
        iframeEl.contentWindow.postMessage(msg, '*');
    };

	//       
    bindEvent(window, 'message', function (e) {
        results.innerHTML = e.data;
    });

child.html

	//       
    bindEvent(window, 'message', function (e) {
        results.innerHTML = e.data;
    });

	//        
    var sendMessage = function (msg) {
        // msg   string
        window.parent.postMessage(msg, '*');
    };

例-Vue:
parent.vue

         ：{{childData}}
 iframe    

	sendMessage () { //         
        let iframeWin = this.$refs.iframe.contentWindow;
        iframeWin.postMessage({
            cmd: 'getFormJson',
            params: {}
        }, '*');
    }
    //           
    window.addEventListener("message", this.handleMessage);
    handleMessage (event) {
        var data = event.data;
        switch (data.cmd) {
            case 'returnFormJson':
                //       
                this.childData = data;
                break;
        }
    }

child.vue

         ：{{iframeData}}
       

  mounted () {
    //           
    window.addEventListener("message", this.handleMessage) //         
    this.iframeData = this.$route.query //         
  }
  handleMessageFromParent (event) { //       
    var data = event.data;
    switch (data.cmd) {
      case 'getFormJson':
        //       
        this.iframeData = data
        break
    }
  }
  handleMessageToParent () { //      
	 window.parent.postMessage({
  		cmd: 'returnFormJson',
  		params: {}
    	}, '*');
  }
 <script> 
</code></pre> 
  <h2>   </h2> 
  <ol> 
   <li>             message，    message           。                     。</li> 
   <li>              message，     origin source          。</li> 
  </ol> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1176907704535429120"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

JAVA基礎
霊静志遠
ビット演算 ≪ロード｜Load｜emdw≫ Date 文字列プール オーバーライド(Override)

keepalivedはredis主従高利用を実現する
bylijinnan
redis

JAvaファイル操作大全
0624chenhong
java

android学習タスク
物心の知れないおなら
さぎょう

zoom.js
韓国の赤い果物の番号を変えます
oom

詳細OracleクラウドオペレーティングシステムSolaris 11.2
藍児唯美
Solaris

Spring学習——springmvc(一)
a-john
springMVC

hdu 4342 History repeat itself------多校連合五
aijuans
数論

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号