首页请根据下列要求写代码：vue页面中嵌入iframe作为地图，使用postMessage进行通信，地图初始化方法放在iframe面板的mounted生命周期中，在地图初始化之后回调告诉vue页面初始化完成

请根据下列要求写代码：vue页面中嵌入iframe作为地图，使用postMessage进行通信，地图初始化方法放在iframe面板的mounted生命周期中，在地图初始化之后回调告诉vue页面初始化完成

时间: 2024-05-12 18:14:01 浏览: 131

17 + 19 + 21 + 23 175 = 1 + 3 + 5 + 7 + 9 +在vue页面中嵌入iframe： ```html <template> <div> <iframe ref="mapIframe" src="/ 11 + 13 + 15 + 17 + 19 + 21 177 = 1 + 3 + 5 +map.html"></iframe> </div> </template> ``` 在iframe面板的mounted生命周期中，初始化地图，并通过 7 + 9 + 11 + 13 + 15 + 17 + 19 + 21 + 23 179 =postMessage向父页面发送消息： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8 1 + 3 + 5 + 7 + 9 + 11 + 13 + 15 + 17 + 19"> <title>Map</title> </head> <body> <script> window.addEventListener('DOMContentLoaded', function() + 21 + 23 181 = 1 + 3 + 5 + 7 + 9 + 11 + 13 { // 初始化地图 initMap(); // 向父页面发送消息，告知地图已经初始化完成 + 15 + 17 + 19 + 21 + 23 183 = 1 + 3 + 5 + 7 window.parent.postMessage({ type: 'map-init' }, '*'); }); function initMap() { // 初始化地图代码 + 9 + 11 + 13 + 15 + 17 + 19 + 21 + 23 185 = 1 } </script> </body> </html> ``` 在vue页面中监听iframe发送的消息，当接收到地 + 3 + 5 + 7 + 9 + 11 + 13 + 15 + 17 + 19 + 21 + 23 187 = 1 + 3 + 5 + 7 + 9 + 11 + 13 + 图初始化完成的消息时，执行回调： ```javascript <script> export default { mounted() { const mapIframe =15 + 17 + 19 + 21 + 23 189 = 1 + 3 + 5 + 7 + this.$refs.mapIframe; // 监听iframe发送的消息 window.addEventListener('message', function(event) { if (9 + 11 + 13 + 15 + 17 + 19 + 21 + 23 191 = 1 + event.source === mapIframe.contentWindow && event.data.type === 'map-init') { // 执行回调 console.log('地图初始化完成！'); } }); } } </script> ```

阅读全文