iframe大小控制

最新推荐文章于 2023-12-08 19:40:08 发布
置顶 最新推荐文章于 2023-12-08 19:40:08 发布
阅读量2.7k 收藏 1
点赞数 1
分类专栏： Web J2EE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niuch1029291561/article/details/8501608
版权
Web 同时被 2 个专栏收录
46 篇文章 1 订阅
订阅专栏
J2EE
39 篇文章 0 订阅
订阅专栏

<iframe src="${basePath}supercenter/webs/secondLevel.jsp" frameborder="0"
   scrolling="no" id="stepForm" name="stepForm"
   style="width: 100%;height:0px;" >
  </iframe>

 

 

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${basePath}style/${systemSubType}/css/default/Styles.css " rel="stylesheet" type ="text/css"/></link>
<link href="${basePath}style/${systemSubType}/css/default/StylesBack.css " rel="stylesheet" type ="text/css"/></link>
<link href="${basePath}style/${systemSubType}/css/default/public.css" rel="stylesheet"  type="text/css"/></link>
    <title>右边</title>
 <style>
 body,html{height:100%;}
 #div_pannel{margin-left:auto;margin-right:auto;}
 *{margin:0;padding:0;}
 #div_tab{background:#fff url(${basePath}style/${systemSubType}/images/default/back/t_tab_bg.gif) repeat-x 0 bottom;height:26px;margin-bottom:2px;margin-left:auto;margin-right:auto;}
 #div_tab li{float:left;text-align:center;position:relative;list-style:none;}
 
 #div_tab li{background:url(${basePath}style/${systemSubType}/images/default/back/t_tab_uselectbg.gif);margin-top:3px;height:23px;}
 #div_tab li span{background:url(${basePath}style/${systemSubType}/images/default/back/t_tab_uselectbg.gif);height:23px;line-height:23px;}
 
 #div_tab li.crent{background:url(${basePath}style/${systemSubType}/images/default/back/t_tab_selectbg.gif);margin-top:2px;height:24px;}
 #div_tab li.crent span{background:url(${basePath}style/${systemSubType}/images/default/back/t_tab_selectbg.gif);height:24px;line-height:24px;}
 
 #div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;} 
 #div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 36px 0 15px;background-repeat:no-repeat;background-position:right bottom;}
 
 #div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}
 #div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}
 #div_tab li .win_close,#div_tab li.crent .win_close{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(${basePath}style/${systemSubType}/images/default/back/t_delete_ico.gif) no-repeat;}  
 #div_tab li .win_close{background-position:0 -14px;}
 #div_tab li .win_close:hover{background-position:0 0;}  
 
 .clearfix:after {content:"."; display:block;height:0;clear:both; visibility:hidden;}
 *html .clearfix{height:1%;width:985px;}
 *+html .clearfix{height:1%;}
 .clearfix{display:inline-block;width:985px;}
 /* Hide from IE Mac */
 .clearfix {display:block;width:990px;}
 </style>
    <script type="text/javascript">
   
      var b_v=navigator.appVersion;
      var IE6=b_v.search(/MSIE 6/i)!=-1;
      //不刷新数据
      function CreateNewTab(tabid, url, name){
       CreateDiv(tabid, url, name,1,0);
      }
      //会刷新数据
      function CreateRfreshTab(tabid, url, name){
       CreateDiv(tabid, url, name,1,1);
      }
      function CreateDiv(tabid, url, name,hasDelete,isRefresh)
   {
    if(isRefresh==1){
     if(document.getElementById("div_" + tabid) != null)RemoveDiv(tabid);
    }
   ///如果当前tabid存在直接显示已经打开的tab
   if (document.getElementById("div_" + tabid) == null)
   {
    //创建iframe
    var box = document.createElement("iframe");
    box.id = "div_" + tabid;
    box.name="div_" + tabid;
    box.src = url;
    box.height = "100%";
    box.frameBorder = 0;
    box.width = "100%";
    
    
    document.getElementById("div_pannel").appendChild(box);
    
    //遍历并清除开始存在的tab当前效果并隐藏其显示的div
    var tablist = document.getElementById("div_tab").getElementsByTagName('li');
    var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
    var tabswidth=0;
    if (tablist.length > 0)
    {
     for (i = 0; i < tablist.length; i++)
     {
      tablist[i].className = "";
      tabswidth+=eval(tablist[i].scrollWidth);
      pannellist[i].style.display = "none";
     }
    }
    //创建li菜单
    var tab = document.createElement("li");
    tab.className = "crent";
    tab.id = tabid;
    if (window.ActiveXObject)//IE
    tab.onclick = function() {CreateDiv( tabid , url , name); }
    var winClose="";
    var ondblClickEvent="";
    //yulon add 双击事件
    if(hasDelete==1){
     winClose="<a οnclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a>";
     ondblClickEvent="title='双击可关闭' ondblClick=\"RemoveDiv('" + tabid + "')\"";
    }
    var litxt = "<span "+ondblClickEvent+"><a href=\"javascript:;\" οnclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "',1,1)\" title=" + name + " class=\"menua\">" + name + "</a>"+winClose+"</span>";
    tab.innerHTML = litxt;
    tabswidth+=tab.scrollWidth;
    //yulon add差值
    var dvalue=eval(document.getElementById("div_tab").scrollWidth)-tabswidth;
    if(tablist.length>2&&dvalue<210){
     for (i = 1; i < tablist.length; i++)
     {
      if(tablist[i].style.display != "none"){
      tablist[i].className = "";
      tablist[i].style.display= "none";
      pannellist[i].style.display = "none";
      break;
      }
     }
    }
    document.getElementById("div_tab").appendChild(tab);
    //if(IE6){
    //}
    $("#div_" + tabid).load(function() { //alert("sfsdsf");
     var iframeHeight = Math.min(box.contentWindow.window.document.documentElement.scrollHeight, box.contentWindow.window.document.body.scrollHeight);
     if(iframeHeight <= 300)
     {
      iframeHeight +=300;
     }
     iframeHeight+=10;
     $(this).height(iframeHeight);
     $("#div_pannel").height(iframeHeight);
    });
    
     document.frames("div_"+tabid).location.reload(); //解决ie6动态创建iframe问题
   }
   else
   {
    var tablist = document.getElementById("div_tab").getElementsByTagName('li');
    var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
    var tabswidth=0;
    for (i = 0; i < tablist.length; i++)
    {
     tablist[i].className = "";
     if(tablist[i].style.display != "none"){
       tabswidth+=eval(tablist[i].scrollWidth);
     }
     pannellist[i].style.display = "none"
    }
    document.getElementById(tabid).className = 'crent';
    tabswidth+=document.getElementById(tabid).scrollWidth;
    //yulon add差值
    var dvalue=eval(document.getElementById("div_tab").scrollWidth)-tabswidth;
    if(tablist.length>2&&dvalue<210){
     for (i = 1; i < tablist.length; i++)
     {
      if(tablist[i].style.display != "none"){
       tablist[i].className = "";
       tablist[i].style.display= "none";
       pannellist[i].style.display = "none";
       break;
      }
     }
    }
    document.getElementById(tabid).style.display = 'block';
    document.getElementById("div_" + tabid).style.display = 'block';
    $("#div_" + tabid).load(function() { //alert("sfsdsf");
     var iframeHeight = Math.min(box.contentWindow.window.document.documentElement.scrollHeight, box.contentWindow.window.document.body.scrollHeight);
     if(iframeHeight <= 300)
     {
      iframeHeight +=300;
     }
     iframeHeight+=10;
     $(this).height(iframeHeight);
     $("#div_pannel").height(iframeHeight);
    });
    
   }
   
   
  }
  function RemoveDiv(obj)
   {
   var ob = document.getElementById(obj);
   ob.parentNode.removeChild(ob);
   var obdiv = document.getElementById("div_" + obj);
   obdiv.parentNode.removeChild(obdiv);
   var tablist = document.getElementById("div_tab").getElementsByTagName('li');
   var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
   if (tablist.length > 0)
   {
    tablist[tablist.length - 1].className = 'crent';
    tablist[tablist.length - 1].style.display = 'block';
    pannellist[tablist.length - 1].style.display = 'block';
   }
   //yulon add
   for (i = tablist.length-1; i > 0; i--)
    {
     if(tablist[i].style.display == "none"){
      tablist[i].className = "";
      tablist[i].style.display= "block";
      break;
     }
    }  
  }
  window.οnlοad=function(){
   CreateDiv('desktop','${basePath}saas/index.action?template=backgroundMain&SystemType=${SystemType}&systemSubType=${systemSubType}','桌面',1);
  }
  οnclick="CreateTab('${item2.name }','${item2.URL1}','${item2.name}')"
  
  
function createwin(tabname,url,title){
 CreateRfreshTab(tabname,url,title,1);
}
    </script>
</head>
<body>
<div class="topborder"></div>
<div class="servicedoorwidth"> 
 <jsp:include page="top.jsp"></jsp:include>
 
 <ul class="clearfix" id="div_tab" style="width:990px;"></ul>
    <div id="div_pannel" style="width:990px;"></div>
 <jsp:include page="bottom.jsp"></jsp:include>
</div>
</body>

自动设置iframe大小的jQuery代码
10-26
会设置src属性指定要嵌入的页面地址，class属性用来为iframe添加样式类以便于使用CSS和JavaScript进行操作，scrolling属性可以控制是否显示滚动条，frameborder属性控制边框的显示与否，name属性用于给iframe指定一...
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
最新发布
m0_65607651的博客
05-30 1519
iframe内嵌网页自适应缩放 以展示源网页的比例尺寸
iframe操作 调整大小
weixin_30755709的博客
06-09 324
在我们做网页的时候，经常会用到iframe,它很向asp.net中的母板，但是比母板更加的灵活好用。在配合jquery后，会实现很强大的效果，像Tab控件的效果啊等等。第一篇开发经验笔记，还是不说那么多了。进入主题。 我们根据不同的单击焦点在同一个iframe中打开不同的网页时，往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实...
iframe嵌入网页时，页面大小怎么自适应
五花漏的博客
02-24 3万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
iframe视频调用自适应页面大小使用css控制（同样适合其他元素）
IT羊的博客
04-01 1993
为了使iframe中的视频自适应页面大小，您可以使用CSS控制其宽度和高度。方便在电脑端和手机端等自适应显示大小，在实际项目还是比较常见呢，用CSS 不用再写JS来控制，这个是蛮不错呢。这个示例使用了16:9的宽高比，您可以根据需要更改padding-bottom的值来设置不同的宽高比。使用这种方法，iframe中的视频将根据页面大小自动调整，并始终保持正确的宽高比。首先，在HTML文件中，将iframe嵌入到一个包装元素（例如。
iframe缩放大小
09-13
iframe缩放大小
iframe 自适应大小实现代码
01-21
页面域关系： 主页面a.html所属域A：...js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b
跨域控制iframe高度
06-25
这样，父页面可以根据实际高度设置iframe的大小。 4. **使用`window.name`**：虽然`window.name`属性不受同源策略限制，但这种方法较为复杂，需要在两个页面间传递一个包含高度信息的字符串，并在加载时解析。 5. ...
设置iframe标签的大小
qq_42092076的博客
04-19 4058
<ifrarme>标签的大小设置，Django填入<ifrarme>标签后自动设置大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&g...
iframe 标签嵌入页面调整大小
qq1359236225的博客
12-08 793
使用iframe标签时遇到个问，iframe标签限制了被嵌入页面的比例大小，试了半天才解决问题。
iframe 自适应
牛肉胡辣汤
10-09 5154
function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.
iframe 自适应高度的问题(jquery控制)
光哥学技术（记录我的思想轨迹、工作学习、生活和关注的领域）
10-18 939
为了解决iframe 自适应高高度的问题 已花了我不少时间，在网上找了好几种方法，可每种都有问题，在参考同事的方法后终于解决了所有问题，现在就把代码写出来和大家分享下，同时避免以后忘记。代码如下： 主页面代码： iframe自适应高度 $(function(){ // 加载时自适应高度 $("#mainFrame").load(function(){ var
iframe放大显示_iframe操作 调整大小
weixin_42361478的博客
12-24 4218
在我们做网页的时候，经常会用到iframe,它很向asp.net中的母板，但是比母板更加的灵活好用。在配合jquery后，会实现很强大的效果，像Tab控件的效果啊等等。第一篇开发经验笔记，还是不说那么多了。进入主题。我们根据不同的单击焦点在同一个iframe中打开不同的网页时，往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实现的方法...
调整iframe的大小以适合内容（仅限同一域）
CSS 初学者指南
06-22 2294
通常，您为iframe设置宽度和高度。 如果里面的内容更大，滚动条就足够了。 下面的脚本试图通过动态调整iframe的大小以适应其加载的内容来解决此问题。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'>&l...
iframe大小控制方法
weixin_30702887的博客
03-30 316
1//js函数iframe的高度自动根据引用页面的高度变化2<scripttype="text/javascript">3functionSetWinHeight(obj)4{5varwin=obj;6if(document.getElementById)7{8if(wi...
IFrame自适应大小（全屏已实现）
热门推荐
ljz9425的专栏
04-18 5万+
<br />近日做项目中用到页面中嵌套iframe，想要实现自适应大小，并且在IE中按F11键全屏时也可以自适应大小。<br />在网上搜来的代码多数只适应页面中只有单个iframe情况，但笔者页面还有一个logo图片。<br />经反复实现，如下代码可实现：<br /><html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>iframe全屏测试</title>
iframe怎么控制分辨率
10-28
根据提供的引用内容，没有明确的方法可以控制iframe的分辨率。但是可以通过控制iframe的高度和宽度来...如果需要控制iframe中内容的分辨率，需要在iframe中嵌入相应的页面，并在页面中使用CSS来控制元素的大小和位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值