iframe窗体默认白色背景去除

1. 问题

有些页面是内嵌iframe的，但是我们系统是深色背景，所以在切换显示iframe页面时经常在加载时出现白色一闪而过。

2. 解决思路

• 1. iframe页面内容加载时保证页面和父窗体同一个背景色
• 2. 确保iframe窗体DOM不影响背景色，但是iframe窗体默认是白色背景。

3. 处理iframe窗体背景色

• 1. 设置iframe窗体背景色为透明值。

iframe{background-color: transparent;
}

• 2. 设置iframe窗体属性 allowtransparency 值为true

<iframe src="a.html" allowtransparency="true" frameborder="0">

将 allowtransparency 的值设为true之后，将会允许窗体背景色设为 transparent (透明)，该属性兼容低版本IE。

• 3. 借助onload方法设置iframe窗体可见

<iframe style="visibility:hidden;" onload="this.style.visibility = visible;" src="a.html" allowtransparency="true" frameborder="0"
>

简单来说，就是加载前不可见，加载后设置iframe窗体可见。

也有小伙伴提出在各个子窗体内设置onload设置父窗体iframe可见，我觉得仁者见仁，毕竟爸爸不一定能管到所有儿子，但是也是一个解题思路。

4. 问题修复

成年人哪有那么多选择，我只会全都要。
html这么设置：

<iframe onload="this.style.visibility = visible;" src="a.html" allowtransparency="true" frameborder="0"
>

css这么设置：

iframe{background-color: transparent;visibility:hidden;
}

解决问题才是大家最想要的结果。

求关注