跨域

关于跨域的详细资料：跨域，这里只需要明确什么情况下跨域了（等同于两个url什么情况下是非同源关系）。

协议、域名、端口三者有其一不同，就算是跨域，就算是非同源

本地环境模拟

借助phpstudy创建两个非同源网站，分别为www.a.com以及www.b.com。其中www.b.com的创建过程如下。

以上创建出来的www.b.com网页就是一个vue页面，访问如下：

同理创建出www.a.com页面，访问页面如下：

vue中使用iframe、postMessage跨域通信

获取iframe的window对象

要使用postMessage()发送消息，需要先获取iframe的window对象，共有三种方式可获取：

window.frames[iframe的name值]
document.getElementById(iframe的id值).contentWindow
this.$refs.iframe的ref值.contentWindow (vue特有)

注意：如果把iframe的窗体对象存储在data对象中，会出现跨域报错！

2. 父页面发送消息，子页面接收
www.b.com父页面代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨域父页面</title>
</head>
<body><div id="app"><div>{{msg}}</div><iframe name="myiframe" ref="myiframe" id="myiframe" src="http://www.a.com/index.html"></iframe><div><input type="button" value="与子页面通信" @click="sendMessage('父页面发来消息~')"></div></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {msg: '跨域父页面',iframeWin: null, },methods: {sendMessage(msg){//要使用postMessage方法，首先需要获取iframe的window窗体，共有三种方式：let iframeWin1 = window.frames["myiframe"];let iframeWin2 = this.$refs.myiframe.contentWindow;let iframeWin3 = document.getElementById("myiframe").contentWindow;//将iframe的window窗体存储至data对象中会出现跨域报错//this.iframeWin = window.frames["myiframe"];let data = {msg: msg};//postMessage(json数据，目标地址的协议+域名+端口)iframeWin1.postMessage(JSON.stringify(data),"http://www.a.com");}}})</script>
</body>
</html>

www.a.com子页面代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe跨域子页面</title>
</head>
<body><div id="mydiv">vue、iframe、postMessage跨域子页面</div>
</body>
<script>//监听message事件，采用冒泡传递方式window.addEventListener("message",receiveMessage,false);function receiveMessage(event){let origin = event.origin;let data = JSON.parse(event.data);if (origin !== "http://www.b.com")return ;//筛选出从www.b.com(父页面)发送来的消息进行处理document.getElementById("mydiv").innerHTML = data.msg;}
</script>
</html>

效果：

3. 子页面回传数据给父页面
在子页面中使用parent.postMessage或者window.parent.postMessage向父元页面发送消息。www.a.com子页面发送消息部分代码：

父页面www.b.com接收消息部分代码：

全部代码

www.b.com页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨域父页面</title>
</head>
<body><div id="app"><div>{{msg}}</div><iframe name="myiframe" ref="myiframe" id="myiframe" src="http://www.a.com/index.html"></iframe><div><input type="button" value="与子页面通信" @click="sendMessage('父页面发来消息~')"></div></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {msg: '跨域父页面',iframeWin: null, },methods: {sendMessage(msg){//要使用postMessage方法，首先需要获取iframe的window窗体，共有三种方式：let iframeWin1 = window.frames["myiframe"];let iframeWin2 = this.$refs.myiframe.contentWindow;let iframeWin3 = document.getElementById("myiframe").contentWindow;//将iframe的window窗体存储至data对象中会出现跨域报错//this.iframeWin = window.frames["myiframe"];let data = {msg: msg};//postMessage(json数据，目标地址的协议+域名+端口)iframeWin1.postMessage(JSON.stringify(data),"http://www.a.com");},//处理接收的消息receiveMessage(event){let data = JSON.parse(event.data);let origin = event.origin;if (origin !== "http://www.a.com")return ;//筛选出从www.a.com(子页面)发送来的消息进行处理this.msg = data.msg;}},created(){window.addEventListener("message",this.receiveMessage,false);},//vue实例销毁时销毁一些监听事件destroyed(){window.removeEventListener("message",this.receiveMessage);}})</script>
</body>
</html>

www.a.com页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe跨域子页面</title>
</head>
<body><div id="mydiv">vue、iframe、postMessage跨域子页面</div><div><input type="button" value="回传数据给父页面" onclick="sendMessage('子页面发来消息~')"></div>
</body>
<script>//监听message事件，采用冒泡传递方式window.addEventListener("message",receiveMessage,false);function receiveMessage(event){let origin = event.origin;let data = JSON.parse(event.data);if (origin !== "http://www.b.com")return ;//筛选出从www.b.com(父页面)发送来的消息进行处理document.getElementById("mydiv").innerHTML = data.msg;}//向父页面发送消息function sendMessage(msg){let data = {msg: msg};parent.postMessage(JSON.stringify(data), "http://www.b.com");}
</script>
</html>

vue页面内嵌iframe使用postMessage进行跨域通信相关推荐

页面嵌套iframe(window.postMessage()实现跨域通信)
项目中的需求需要外接一个iframe与主页面之间需要通信的情况在iframe 中: 在主页面中: window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚 ...
ifrme嵌入外部页面，在外部页面调用本页面方法,window.postMessage实现跨域通信
项目场景:vue页面开发的系统要继承外部系统页面,并且在外部系统页面调用本系统的方法,这样来看的话肯定会存在跨域的问题,而且直接调用方法的话,也不太安全,后来了解到window.postMessage ...
服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式使用postMessag ...
window.postMessage - 前端跨域通信
window.postMessage - 前端跨域通信 window.postMessage() 语法 The dispatched event 安全问题示例注意 HTMLIFrameElemen ...
使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...
html 内嵌iframe,html页面内嵌iframe
1.创建iframe scrolling="no" οnlοad="resizeIframe(this)"> 2. js将html文件字符串,write进 ...
vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能？
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...
vue内嵌iframe跨域通信
1.Vue组件中如何引入iframe? <template><div class="act-form"><iframe :src="src& ...
[转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题参考文章: (1)[转]html5: postMessage解决跨域和跨页面通信的问题 (2)https://www.cnblog ...

vue页面内嵌iframe使用postMessage进行跨域通信

跨域

本地环境模拟

vue中使用iframe、postMessage跨域通信

全部代码

vue页面内嵌iframe使用postMessage进行跨域通信相关推荐

最新文章

热门文章