在vue父页面有两个个参数 名称和图标,需要把这两个参数传到iframe的地图里面,在地图触发绘点事件的时候,获取到传来的参数并且展示
vue:传值给子页面iframe
// 传值给子页面iframe(2个参数) handleIframeLoad() { const iframeWindow = this.$refs.myIframe.contentWindow; const data = { imgUrl: this.imgUrl, name: this.name, }; iframeWindow.postMessage(data, '*'); },
iframe接收父页面的值
在iframe中,使用window.addEventListener监听message事件,然后在事件处理程序中获取传递的数据:
<!-- iframe.html --> <script> // 监听来自vue父页面的消息 window.addEventListener('message', function(event) { const data = event.data; // 在这里处理接收到的消息 console.log('Received message from parent:', data); }); </script>
当父页面中的按钮被点击时,会将值传递给子页面的iframe元素。子页面通过监听message事件获取传递的值,并进行相应的处理。
这种方法需要父页面和子页面在同一个域名下,否则会因为浏览器的同源策略而导致通信失败。