记一次关于vue和iframe的跨域问题

vue iframe 一起使用的跨域

场景：在对接一些其他公司的项目的时候，代码逻辑可能很多，需要我们直接使用iframe 链接的这种方式进行处理，即使代码放在同一目录下，仍然会产生跨域的情况。

亲测：this.$refs.iframe.contentWindow.XXX 的方法不行

提供可用方案：使用postMessage的方法：

vue向iframe 发送消息

vue中的写法

  mounted(){

	//这里是监听iframe发送事件的监听
    window.addEventListener('message', this.handleMessage,false)
 
  },
  methods:{
  	//vue向iframe发送消息的方法
	toUpdateIframeMessage(){
	//这里为向iframe 内部发送消息
            this.iframeWin.postMessage({
            //这里是一个对象 参数可传什么都可以只是做唯一的标识
                method: 'updateIframeMessage',
                params: {},
               
              }, '*')
      	}，
      	//vue 接收iframe的方法
      handleMessage(event){
      var data=event.data;
          switch (data.method) {
            case 'updateVueMessage':
           			//这里是接收到方法后的处理逻辑
              break;
				default :
				break
			}
			}
	}

iframe向 vue 发送消息

iframe 内的写法

//iframe 发送消息
 window.parent.postMessage({
        method: 'updateVueMessage',
        //所要传递的数据
        params:{}
    }, '*');
iframe 接收vue 的方法
window.addEventListener("message", function(event){
  var data = event.data;
  switch (data.method) {
    case 'updateIframeMessage':
 		 //接收到vue的方法后的处理逻辑
      break;
 
    default:
      break;
  }
});