最近做的东西使用到iFrame来解决内嵌网页问题越来越多,于是乎就发现,似乎iFrame的控制方式非常的不友好,用了一段时间有点小结,先一点一点写下来,以免忘记。
1、去掉边框背景
>>IE5.5开始支持iFrame的内容透明,但注意要这么写:
< iframe
src="transparent.htm" frameborder=0
/>
同时需要在transparent.htm的body元素加上bgColor="transparent"透明才生效,当然去掉边框还可以直接使用CSS样式style="border:none;"去掉。
2、自适应内嵌页面的宽高
>>如果是使用纯JavaScript,那首先需要有这么一个函数:(注意不要放到页面加载完成函数中如οnlοad=function(){},$(function(){})或者页面的最后,不然会提示找不到函数)
function resizewin(_ID){
var iwin = document
.getElementById(_ID).contentWindow;
var idoc =
iwin.document;
idoc.body.style.overflow="hidden";
document
.getElementById(_ID).height = idoc.body.scrollHeight;
document
.getElementById(_ID).width = idoc.body.scrollWidth;
}
< iframe
src="transparent.htm"
frameborder=0οnlοad="resizewin(this.id)"/>
>>如果使用jQuery,那就非常简单了οnlοad="$(this).height($(this).contents().height());"
3、待续……