vue内嵌iframe跨域通信

1、Vue组件中如何引入iframe？

<template><div class="act-form"><iframe :src="src"></iframe></div>
</template><script>export default {data () {return {src: '你的src'}}
}
</script>

如上，直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了

2、vue如何获取iframe对象以及iframe内的window对象？

在vue中，dom操作比不上jquery的$('#id')来的方便，但是也有办法，就是通过ref

<template><div class="act-form"><iframe :src="src" ref="iframe"></iframe></div>
</template><script>export default {data () {return {src: '你的src'}},mounted () {// 这里就拿到了iframe的对象console.log(this.$refs.iframe)}
}
</script>

然后就是获取iframe的window对象，因为只有拿到这个对象才能向iframe中传东西

<template><div class="act-form"><iframe :src="src" ref="iframe"></iframe></div>
</template><script>export default {data () {return {src: '你的src'}},mounted () {// 这里就拿到了iframe的对象console.log(this.$refs.iframe)// 这里就拿到了iframe的window对象console.log(this.$refs.iframe.contentWindow)}
}
</script>

3、vue如何向iframe内传送信息？

通过postMessage，具体关于postMessage是什么，自己去google，我的理解postMessage是有点类似于UDP协议，就像短信，是异步的，你发信息过去，但是没有返回值的，只能内部处理完成以后再通过postMessage向外部发送一个消息，外部监听message 为了让postMessage像TCP，为了体验像同步的和实现多通信互不干扰，特别制定的message结构如下

{cmd: '命令',params: {'键1': '值1','键2': '值2'}
}

通过cmd来区别这条message的目的

具体代码如下

<template><div class="act-form"><iframe :src="src" ref="iframe"></iframe><div @click="sendMessage">向iframe发送信息</div></div>
</template><script>export default {data () {return {src: '你的src',iframeWin: {}}},methods: {sendMessage () {// 外部vue向iframe内部传数据this.iframeWin.postMessage({cmd: 'getFormJson',params: {}}, '*')},},mounted () {// 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessagewindow.addEventListener('message', this.handleMessage)this.iframeWin = this.$refs.iframe.contentWindow},handleMessage (event) {// 根据上面制定的结构来解析iframe内部发回来的数据const data = event.dataswitch (data.cmd) {case 'returnFormJson':// 业务逻辑breakcase 'returnHeight':// 业务逻辑break}}
}
</script>

4、iframe内如何向外部vue发送信息？

现在通过点击“向iframe发送信息”这个按钮，从外部vue中已经向iframe中发送了一条信息

{cmd: 'getFormJson',params: {}
}

那么iframe内部如何处理这个信息呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>iframe Window</title><style>body {background-color: #D53C2F;color: white;}</style>
</head>
<body><h1>Hello there, i'm an iframe</h1><script>// 向父vue页面发送信息window.parent.postMessage({cmd: 'returnHeight',params: {success: true,data: document.body.scrollHeight + 'px'}}, '*');// 接受父页面发来的信息window.addEventListener("message", function(event){var data = event.data;switch (data.cmd) {case 'getFormJson':// 处理业务逻辑break;}});</script>
</body>
</html>

vue内嵌iframe跨域通信相关推荐

iframe跨域通信的通用解决方案-第二弹!（终极解决方案）
一年前,我发过一篇关于跨文档通信方案的文章<iframe跨域通信的通用解决方案>,提供了一种基于创建iframe与轮询window.name的方案. 一年后,很高兴地带来彻底改造的新版本. ...
iframe跨域通信
在非跨域的情况下,可以通过 [父调子] iframe的dom节点.contentWindow [子调父]window.top/window.parent 来相互通信在跨域情况下,可以使用postMe ...
H5 开发内嵌页面跨域问题
问题有一个内嵌外部网页的需求,而页面内嵌进来出现跨域,从而进行一系列尝试解决思路由于是H5开发,当时内嵌用的是iframe,想起移动端有一个webview,webview的权限比iframe的高 ...
vue页面内嵌iframe使用postMessage进行跨域通信
跨域关于跨域的详细资料:跨域,这里只需要明确什么情况下跨域了(等同于两个url什么情况下是非同源关系). 协议.域名.端口三者有其一不同,就算是跨域,就算是非同源本地环境模拟借助phpstudy ...
利用iframe实现ajax 跨域通信的解决方案
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...
vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能？
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...
【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇"跨域,不再纠结&quo ...
iframe跨域自适应高度
关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...
前端跨域通信的几种方式
前言前端通信类的问题,主要包括以下内容: 1.什么是同源策略及限制同源策略是一个概念,就一句话.有什么限制,就三句话.能说出来即可. 2.前后端如何通信如果你不准备,估计也就只能说出ajax. ...

vue内嵌iframe跨域通信

vue内嵌iframe跨域通信相关推荐

最新文章

热门文章