技术成就梦想

知道用户需求,做到专注!c#,donet,Frameworks,UML,面向对象,设计模式!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

使Iframe的宽高自适应,并且兼容IE 和NC浏览器

Posted on 2008-08-21 17:34  我不是高手  阅读(950)  评论(0编辑  收藏  举报

1,适应内容自动扩展,在parent页面上加处理script:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language=JavaScript>
function autoResize(){
try{
document.all["content"].style.height=content.document.body.scrollHeight;
document.all["content"].style.width=content.document.body.scrollWidth;
}
catch(e){}
}
</script>

<style type="text/css">
<!--
body {
margin-left: 100px;
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px;
background-color: #CCCCCC;
}
-->
</style></head>

<body>
<iframe name="content" style="aho:expression(autoResize())" width="100%" frameborder=0 src="1.htm" scrolling=no></iframe>
</body>
</html>

2.在引用的文件上加script

function changeIframeHeight() //自动改变 Iframe 的高度
{
if(top != self)
   window.parent.document.getElementById(self.name).height = document.body.scrollHeight;
}

function window.onload()
{
   changeIframeHeight(); //改变 Iframe 高度
}

把上面那个放到需要自适应的页面中,用javascript套用就可以了

 

实际上只需要做第一步就OK了,在子页面可以不用添加任何JS代码即可实现