1、现在嵌入页面子页面加入传给父页面高度的方法
/** * 设置页面iframe高度 (在vue的updated()中使用) * */ setPageIFrameHeight(currentPage) { var height = document.getElementById("app").offsetHeight+80; var postObj = { viewHeight: 600, }; height = height&&height>600 ? height : 600; postObj.viewHeight = height; var message = JSON.stringify(postObj); //把页面高度传给嵌入的父页面 window.parent.postMessage(message, '*'); // console.log("message",message); }
2、在页面中写入生命周期更新后的updated(),这个函数会在页面修改页面大小触发
export default { // updated 更新完成状态 updated() { this.$nextTick(()=>{ //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法,获取更新后的DOM. this.setPageIFrameHeight(); }) }, }
3、在父页面获取子页面传过来的高度再赋值给iframe
/** * 封装的ifram高度自适应的方法 * @param {*} idName ifram的id元素值 */ IframeHeight:function(idName){ window.removeEventListener("message",reinitIframe,false);// 清除上一次的监听事件 window.addEventListener("message",reinitIframe,false);// 绑定监听事件 function reinitIframe(e){ //设置Iframe的高度 var obj = JSON.parse(e.data); $('#'+idName).height(obj.viewHeight); } },
总结:只是记录思路的方法,直接复制粘贴不可用