项目中要在页面中嵌入通过富文本编辑器编辑的html内容子页面,预想可通过两种方式实现:
方式一:是将内容子页面的html代码通过vue v-html方式渲染到主页面的div下;
方式二:通过在主页面嵌入iframe页面实现;
两种方式都进行了验证,并且都遇到问题:
方式一问题:可以渲染出子页面html内容,但是丢失css样式,引入ckeditor的标准样式css后,绝大部分样式问题解决,但通过标签选择器指定的样式会受主页面样式的干扰,导致子页面内容在浏览器上无法还原实际显示效果;
方式二问题:iframe方式可以很轻易的加载出子页面内容,但由于子页面与主页面之间跨域,所以主页面无法获取到iframe子页面的document,从而无法获取子页面的实际高度,显示效果无法达到预期。
经过比较果断选取方式二来解决,那么如何解决跨域获取iframe子页面高度,并实现iframe自适应子页面高度的问题呢?
最终采用iframe子页面通过postMessage方式解决问题,具体如下:
1)子页面onload完成后通过postMessage方式将实际页面高度通知给父页面;
var ele_height = element.offsetHeight;
console.log("Size: " + ele_height);
if(this.frameMode) {
let _resizeMsgObj = {
type: "resize",
data: {
height: ele_height
}
};
top.postMessage(JSON.stringify(_resizeMsgObj), '*');
2)父页面监听消息,并在接收到消息后调整iframe高度;
html代码:
<div class="com_right_content" style="height: auto;">
<iframe style="width: 100%;height:800px;"
:src="detailPreviewMediaInfo.webviewurl"
frameborder="0"
scrolling="no"
id="contentIframe">
</iframe>
</div>
js代码:
window.addEventListener('message', function(event){
console.log(`received message: `, event.origin, event.data)
let msgdataStr = String(event.data)
if(msgdataStr.indexOf("resize") != -1){
console.log(`received iframe resize message: `, event, event.data)
let msgdata = JSON.parse(msgdataStr)
document.getElementById('contentIframe').style.height = msgdata.data.height + 'px'
}
}, false);
补充说明:
由于父页面不知道子页面的高度,先将iframe高度设置为0px,接收到子页面消息后再将iframe高度设置为实际高度,发现iframe加载需要较长时间,原因是子页面onload事件是在整个页面全部加载完成后才触发,包括页面所有js、css、图片文件的加载,但图片加载需要较长时间,所以iframe加载时间过长,影响用户体验,但在图片加载完之前子页面的高度又可能不准确,因此在父页面在初始时给iframe设置一个高于一屏的高度,可以较好的解决用户体验问题。