千鋒教育-做有情懷、有良心、有品質的職業教育機構

                    手機站
                    千鋒教育

                    千鋒學習站 | 隨時隨地免費學

                    千鋒教育

                    掃一掃進入千鋒手機站

                    領取全套視頻
                    千鋒教育

                    關注千鋒學習站小程序
                    隨時隨地免費學習課程

                    【熱點話題】 零基礎學IT IT學習教程 IT學習筆記 IT技術干貨 IT培訓機構 IT應聘面試 IT職場就業 Java培訓機構哪些好
                    當前位置:首頁  >  關于學院  >  技術干貨  > VUE組件如何與iframe通信問題

                    VUE組件如何與iframe通信問題

                    來源:千鋒教育
                    發布人:qyf
                    時間: 2022-09-16 16:33:34 1663317214

                    VUE組件如何與iframe通信問題

                      像這種問題其實問的不是特別詳情 面試者可能不懂題目的意思 但是我們要學會揣摩 面試官的問題

                      如果不知道 你就直說vue的組件通信 在講iframe的頁面獲取v

                      vue組件內嵌一個iframe,現在想要在iframe內獲取父組件內信息,采用的是H5新特性PostMessage來解決跨域問題

                      采用postMessage內涵兩個API:

                      onMessage:消息監聽

                      postMessage:消息發送

                      代碼和例子

                     <div class="mapbox">

                          <iframe name="map" src="http://localhost:8083/setposition.html?add='add'"></iframe>

                     </div>

                    clearMap(){

                          let map = document.getElementsByName("map")[0].contentWindow

                          map.postMessage("clearMap","*")

                        }

                    iframe內:

                     

                    window.addEventListener('message', function (evt) {

                     

                        if (evt.data == 'clearMap'){

                            clearMap()

                        }

                        //event.data獲取傳過來的數據

                    });

                     

                    聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

                    10年以上業內強師集結,手把手帶你蛻變精英

                    請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通

                    免費領取

                    今日已有369人領取成功

                    劉同學 138****2860 剛剛成功領取
                    王同學 131****2015 剛剛成功領取
                    張同學 133****4652 剛剛成功領取
                    李同學 135****8607 剛剛成功領取
                    楊同學 132****5667 剛剛成功領取
                    岳同學 134****6652 剛剛成功領取
                    梁同學 157****2950 剛剛成功領取
                    劉同學 189****1015 剛剛成功領取
                    張同學 155****4678 剛剛成功領取
                    鄒同學 139****2907 剛剛成功領取
                    董同學 138****2867 剛剛成功領取
                    周同學 136****3602 剛剛成功領取

                    推薦閱讀

                    最新文章

                    開班信息
                    北京校區
                    • 北京校區
                    • 大連校區
                    • 廣州校區
                    • 成都校區
                    • 杭州校區
                    • 長沙校區
                    • 合肥校區
                    • 南京校區
                    • 上海校區
                    • 深圳校區
                    • 武漢校區
                    • 鄭州校區
                    • 西安校區
                    • 青島校區
                    • 重慶校區
                    • 太原校區
                    • 沈陽校區

                    成·人免费午夜在线观看