iframe高度宽度自适应兼容所有浏览器

最新推荐文章于 2023-12-04 15:07:47 发布

夏末_阳光依然耀眼

最新推荐文章于 2023-12-04 15:07:47 发布

阅读量687

点赞数

分类专栏： div+css 文章标签： css div javascript iframe

本文链接：https://blog.csdn.net/boyit0/article/details/40046207

版权

div+css 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<script src="js/1.3.2.js"></script>
<style type="text/css">
*{ padding:0; margin:0;}
html,body{ width:100%; height:100%; }
.menu{ width:200px; height:100%; text-align:center;}
.close{ display:none;}
.bar{ width:5px; background:#317EF3; cursor:pointer;}
.clum{ width:5px; height:100%; background:#317EF3;}
.open{ width:5px; height:100%; background:#317EF3;}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $(".bar").click(function(){
    $(this).toggleClass("open");
 $(".menu").toggleClass("close");
  });
});
<!--  
//调整 PageContent 的高度  
 function SetCwinHeight(){
  var iframeid=document.getElementById("iframeid"); //iframe id
  if (document.getElementById){
   if (iframeid && !window.opera){
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
     iframeid.height = iframeid.contentDocument.body.offsetHeight;
    }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
     iframeid.height = iframeid.Document.body.scrollHeight;
    }
   }
  }
 }
//-->   
</script>
</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" id="table">
  <tr>
    <td class="menu">菜单</td>
    <td class="bar"><!--<div class="clum"></div>--></td>
    <td height="100%"><iframe id="iframeid" οnlοad="Javascript:SetCwinHeight()" width="100%" height="100%" frameborder="0" src="http://www.baidu.com/"></iframe></td>
  </tr>
</table>
</body>
</html>

夏末_阳光依然耀眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe高度宽度自适应兼容所有浏览器

iframe*{ padding:0; margin:0;}html,body{ width:100%; height:100%; }.menu{ width:200px; height:100%; text-align:center;}.close{ display:none;}.bar{ width:5px; background:#317EF3; cursor:pointer;
复制链接

扫一扫