Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
一、需求分析
最近做的一个用H5加原生开发的html项目，现需要集成到Vue2.0项目里面来。遇到的相关问题做个记录和总结，以便能帮到大家避免踩坑。
二、问题记录
1、页面空白问题
将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
通过搜索资料发现，把html页面放到public目录下面的static目录下能够显示
不写static目录直接访问会报错
2、vue和html页面之间如何通信
首先通过window对象 绑定一个方法 去调用vue声明的方法
格式为：window[‘方法名’] = （参数）=>{ vue里面的 你需要在html页面里调用的方法 }
下面是贴的相关代码 三个方法
methods: {// 调用方法iframeLoad() {const iframe = document.querySelector('#iframe')this.loading = trueconst that = this// 兼容处理if (iframe.attachEvent) {// IEiframe.attachEvent('onload', () => {that.loading = false})} else {// 非IEiframe.onload = () => {that.loading = false}}},//查询机组下拉列表listSystemQuery(){listSystem().then((response) => {this.selectData = response.rows || [] //机组下拉列表this.sendMessage(1)}).catch((error)=>{console.log(error)})},//查询所选机组下的查询参数listParamsQuery(param){const value = param.valueconst number = param.numgetSystemResult(value).then((response) => {this.paramsData = response.data || [] //所选机组参数this.sendMessage(2,number)}).catch((error)=>{console.log(error)})},//点击查询按钮获取对标分析数据dbfxQueryData(param){const params = {id: param.id,startTime: param.startTime, //开始时间endTime: param.endTime, //结束时间queryParams: param.queryParams,timeParam: param.timeParam,//页面录入 持续时间秒}const num = param.numgetSystemData(params).then((response) => {this.resultData = response.data || [] //所选机组参数this.sendMessage(3,num)}).catch((error)=>{console.log(error)})},sendMessage(num,num2){const iframeWindow = document.querySelector('#iframe').contentWindowif(num===1){iframeWindow.postMessage({cmd: 'selectData',params: {success: true,data: this.selectData,}},'*') // 发送消息至html页面}else if(num ===2){iframeWindow.postMessage({cmd: 'paramsData',params: {success: true,data: this.paramsData,num:num2}},'*') // 发送消息至html页面}else if(num ===3){iframeWindow.postMessage({cmd: 'resultData',params: {success: true,data: this.resultData,num:num2}},'*') // 发送消息至html页面}},}在vue绑定方法之后 那么如何在html去调用这个方法呢
通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！
//调用vue方法const param ={value:selectValue,num:num}window.parent['queryParamsData'](param)如下 html调用的是这个方法
param可以接收到来取值
html调用vue现在可以拿到数据啦 那么该如何回传到html页面上来使用呢 看下面！
首先拿到iframe的contentWindow对象，通过这个对象 postMessage 就可以发送消息给到html页面
html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，
通过传递不同的参数作为标识来区分是那个接口来发送的消息
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息
再通过传参的不同就可以区分处理逻辑啦
3、iframe延迟加载提升用户体验
如果不加加载效果，会导致dom元素渲染的很慢，体验感很差，这里通过antdesign的spin渲染组件来搞定它
那么问题来了，什么情况下知道iframe渲染完了呢，看下面
iframe对象attachEvent事件可以知道是否已加载完成，再去给他关闭loading即可