2009年2月26日

iframe高度自动调整(通过IE,firefox,opera测试)

1.index.html
    <iframe id="mainIframe" scrolling="no" frameborder="0" width="100%" src="a.html"></iframe>
    <a href="#" onclick="page('a.html')">a页面</a><a href="#" onclick="page('b.html')">b页面</a>

2 a.html  //内嵌页面
    <script language="javascript">
          changeHight();
    </script>

3. b.html  //内嵌页面
     <script language="javascript">
          changeHight();
    </script>

4. page.js
 function changeHight(){
  var iFrm = parent.document.getElementById("mainIframe");
     var subWeb = iFrm.contentDocument;
     if(subWeb){
    if (subWeb.body.scrollHeight>480)
   iFrm.height = subWeb.body.scrollHeight+20;
  else
      iFrm.height=500;
  } 
  if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight!="0"){
   parent.document.getElementById("mainIframe").style.height=window.document.body.scrollHeight;
  }
  if(top.document.frames["mainIframe"].document && window.document.body.scrollHeight=="0"){
   parent.document.getElementById("mainIframe").style.height=500;
  }
}

function page(page){
    document.getElementById("mainIframe").src=page;
}



造成IE,FireFox,Opera中Iframe显示差异原因在于
1.iframe在FireFox中取法为parent.document.getElementById("mainIframe").contentDocument,而在ie,opera中为parent.document.getElementById("mainIframe").document
2.当页面无滚动时,window.document.body.scrollHeight在IE中能取到,fireFox和Opera中取不到。

posted @ 2009-04-21 14:05 software5168 阅读(1278) | 评论 (0)编辑 收藏

文件上传下载

     摘要: 1.myapp/index.html <html> <head> 文件操作 <iframe id="iframefile" scrolling="no" frameborder="0" width="100%" src="/myapp/fileUpload.jsp"></iframe> &l...  阅读全文

posted @ 2009-02-26 17:11 software5168 阅读(306) | 评论 (0)编辑 收藏

<2009年2月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
1234567

导航

统计

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

JAVA學習網站

綜合

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜