通过消息传递实现iframe自适应高度，支持跨域。
父页面监听消息
<template><iframe id="processFrame" name="frames" width="100%" :src="iframeUrl" frameborder="0"></iframe></template>
<script>export default {data() {return {iframeUrl: "",};},created() {},mounted() {const that = this;this.iframeUrl ="http://10.1.5.13:8560/entEnd.html#/?token=eyJhbGciOiJIUzI1NiJ9.eyJYQ19MT0dJTl9KV1RfS0VZXyI6IjMxNmIwMzY0LTFlY2MtNDVjOC05OGEyLWM5NGY1OWNhN2ZkNSJ9.XAH9TJ6kieRPt6-cs5NuW1hOmqSMA6jVNQBSH_3i3VQ";// 监听消息window.addEventListener("message", that.updateIframeHeight);},beforeDestroy() {//移除监听window.removeEventListener("message", this.updateIframeHeight);},methods: {updateIframeHeight(event) {if (event.origin == "http://10.1.5.13:8560") {const iframe = document.getElementById("processFrame");// 需将原始高度置为0，再重新设置，否则会没有用iframe.style.height = 0; iframe.style.height = event.data + "px";}}}};</script>
子页面发送消息，页面高度发生变化，发送高度给父页面：
<template><div id="iframe-content">// 渲染列表数据</div></template>
getList() {const {pageNum, pageSize } = this.query;this.loading = true;getlist({pageNum, pageSize }).then((data) => {const list = data.list || [];this.tableData = list;this.total = data.total;this.totalPage = data.pages;this.loading = false;// 页面渲染之后, 发送消息给父页面跟新iframe高度this.$nextTick(() => {this.postMessage();});}).catch((err) => {this.loading = false;this.tableData = [];this.total = 0;this.totalPage = 0;});}// 发送消息修改iframe高度postMessage() {// 使用 document.body.scrollHeight 会出现页面内容高度减少的时候，document.body.scrollHeight 获取的值没有根据内容发生改变，所以这里直接获取页面元素的高度// const h = document.body.scrollHeight;const ele = document.getElementById('iframe-content') || {};const h = ele.clientHeight || 1393; //1393 是默认最小高度// 使用window.top 或者window.parent获取父级windowwindow.top.window.postMessage(h, 'http://10.1.5.13:9533/web/testIframe');}
