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>