vue iframe 全屏 微信浏览器（vue中iframe的使用）

iframe在同域时能自由操作iframe和父框架的内容(DOM)               ，在跨域时可以实现页面跳转               。

<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>

获取iframe里面的内容

iframe.contentWindow, 获取iframe的window对象

iframe.contentDocument, 获取iframe的document对象 const _iframe = document.getElementById(iframe).contentWindow

CDM跨域

如果你设置的iframe的域名和你top window的域名完全不同
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，可以使用CDM(cross document messaging)进行跨域消息的传递
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。

发送消息: 使用postmessage方法 

postMessage(message, targetOrigin)

message: 传递给iframe的内容, 通常是string,最好不要传object对象














，需要传对象时  
  
  
  
  
  
  
 ，使用JSON.stringfy转换














。

targetOrigin: 接受你传递消息的域名 
  
  
  
  
  
  
  ，可以设置绝对路径


 


 


 


 


 


 


 

，也可以设置""或者"/"  
  
  
  
  
  
  
 。 表示任意域名都行 
 
 
 
 
 
 
，"/"表示只能传递给同域域名 
  
  
  
  
  
  
  。

_iframe.postMessage(JSON.stringify(_obj), *)

接受消息: 监听message事件

当targetOrigin接受到message消息之后,会触发message事件


 


 


 


 


 


 


 

。 message提供的event对象上有3个重要的属性  
   
   
   
   
   
   
   ，data,origin,source.

window.addEventListener(message, function (event) { console.log(event) if (event.origin === window.callBackUrl.iframeSrc) { _this.childData = event.data console.log(event.data) _this.saveForm() } })