vue项目有个需求是域名A和域名B上各做一个说明页，页面的内容引用的是域名C的某页，然后点击通过域名C页面上的按钮回到域名A或域名B上的某个不同页。因为用的是iframe来做的引用。所以解决的思路是域名A或域名B引用域名C页面的时候，给域名C传一个值，然后域名C通过传的值来做处理。
之前想使用window.top.document.referrer 或者 window.top.document.location.href来处理，但是在跨域下出现问题导致不行。搜索发现iframe跨域传值可以用四种方法解决。下面我们就说用postMessage来处理。
vue iframe跨域传值
iframe跨域跟其它页面通信的主要是用到postMessage，postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能。
域名A上的页面a.vue, 建立一个iframe，如：
<template>
<div>
<iframe :src="authShopAuthUrl" runat="server" border="0" scrolling="no" allowtransparency="yes" ref="authShopIframe" frameborder="0" height="560" width="100%"></iframe>
</div>
</template>
<script>
export default {
name: "vueiframe",
data() {
return {
authShopAuthUrl: ''
}
},
mounted() {
this.authShopAuthUrl = "http://www.ku51.net/vue"
setTimeout(function(){
this.$refs.authShopIframe.contentWindow.postMessage("传递的值","*")
},500)
}
}
</script>
域名C上的接收页c.html，监听 message，可以获得其他文档发来的消息.
<script>
var params = '';
window.addEventListener('message', function(e){
if(e.source != window.parent) {
return;
}
params = e.data;
console.log("接收传到的值：" + params);
})
</script>
vue 未定义属性解决数据不响应问题