vue
<el-button @click="sendMessage"><el-button>
<div id="iframeId">
<iframe id="iframe" ref="frame" scrolling="no" style="border: 0" width="100%" height="100%" :src='iframeSrc' @load="sendMessage">
</iframe>
</div>
data() {
return {
iframeSrc : 'iframe嵌套的html页面地址'
}
},
methods: {
sendMessage(){
let val = $("#iframeId").height(); // 获取用于展示iframe页面区域的高度
let iframeWindow = document.querySelector('#iframe').contentWindow;
iframeWindow.postMessage(val ,"*"); // 发送消息至html页面
},
}
html
<div class="tem" id="tem">
</div>
window.addEventListener('message', function(event) { //接收vue传递的参数
document.getElementById('tem').style.height = event.data + 'px';
});