各类UI框架的admin页面,是如何处理嵌入的iframe的显示隐藏,事件监听的呢?

Question

问题描述

在开发一些后台管理项目的时候,很多场景是页面中间区域内容可切换,类似下图,大部分内容是通过插入iframe方式嵌入的.

大多数实现方案是通过 display:none 到display:block 切换来控制某个页面的显示与隐藏.
但是因为display:none的元素是获取不到尺寸的.因而导致如果页面还未加载完成就切换到了新的页面,被display:none的页面中需要依赖宽高计算的内容就会无效.导致显示异常.

问题出现的环境背景及自己尝试过哪些方法

首先考虑过用visibility属性来控制,问题太多放弃了.
之后在resize事件上考虑,交由iframe内部去监听resize.从display:none到display:block的过程中,在Firefox下是会触发一次resize的,但chrome下无效.

有没有更好的方案或者最佳实践呢?

Answer 1

首次可以在iframe的 onload事件里面处理resize。后续显示隐藏的时候，可以通过显示调用iframe对象里面的事件来触发。
例如

// iframe.html 定义resize
function resize(){ }
window.onload = resize

// main.html 调用
// add tab的时候，或者切换时显示调用
tab.click = function(){
    // display: block
    iframe.contentWindow.resize()
}