这篇文章主要介绍“vue项目嵌套iframe怎么实现发送、接收数据”，在日常操作中，相信很多人在vue项目嵌套iframe怎么实现发送、接收数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue项目嵌套iframe怎么实现发送、接收数据”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
vue嵌套iframe发送、接收数据
<template> <div class="home"> <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe> </div></template><script> export default { mounted() { let mapFrame = this.$refs['mapFrame'] if (mapFrame.attachEvent){ //兼容浏览器判断 mapFrame.attachEvent("onload", function(){ let iframeWin = mapFrame.contentWindow iframeWin.postMessage({ method: 'getBaseInfo', data:'我是vuex state的数据' },'*') }) } else { mapFrame.onload = function(){ let iframeWin = mapFrame.contentWindow iframeWin.postMessage({ method: 'getBaseInfo', data:'我是vuex state的数据' },'*') } } } }</script><style scoped lang="stylus">.home { .mapFrame { height: 300px; width: 500px; }}</style>子页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>iframe嵌套网页测试</title></head><body> <script> window.addEventListener('message',function(e){ console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') console.log(e.origin,e.data) }) // window.postMessage({ // method:'localtest', // data:'ddddddddddddddddddddddddddddd' // },'*') </script></body></html>vue中iframe的使用
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。
<iframe id="iframe" :src="iframeSrc" width="100%" frameborder="0"></iframe>获取iframe里面的内容
iframe.contentWindow, 获取iframe的window对象iframe.contentDocument, 获取iframe的document对象
const _iframe = document.getElementById('iframe').contentWindowCDM跨域
如果你设置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
postMessage(message, targetOrigin)message: 传递给iframe的内容, 通常是string,最好不要传object对象，需要传对象时，使用JSON.stringfy转换。targetOrigin: 接受你传递消息的域名，可以设置绝对路径，也可以设置""或者"/"。 表示任意域名都行，"/"表示只能传递给同域域名。
_iframe.postMessage(JSON.stringify(_obj), '*')接受消息: 监听message事件
当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source.
window.addEventListener('message', function (event) { console.log(event) if (event.origin === window.callBackUrl.iframeSrc) { _this.childData = event.data console.log(event.data) _this.saveForm() } })到此，关于“vue项目嵌套iframe怎么实现发送、接收数据”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
