全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

VUE组件如何与iframe通信问题

发布时间:2022-09-16 16:33:34
发布人:qyf

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获取传过来的数据

});

 

相关文章

抖店平台商户被退店还能退货吗?如何提高评分?

2023-09-19

抖店入驻收费多少?开抖店费用是多少?

2023-09-19

想做直播带货的货源哪里来?怎么找货源?

2023-09-19

抖店没有营业执照怎么办?类型有哪些?

2023-09-19

女孩子拍什么最容易火?拍视频怎么赚钱的?

2023-09-19

怎样投抖加不花钱,有哪些技巧?

2023-09-19
在线咨询 免费试学 教程领取