iframe自适应窗体
一般用easyui的同胞，右侧都是用来展示左侧选中栏目的具体内容的，这就用到了iframe，但是默认iframe框架是不能撑开高度的，如果需要让框架高度自适应需要用js实现
UI层：
<script src="Scripts/PublicContract.js"></script> <script src="Scripts/UserLogin.js"></script> <div style="margin: 20px 0;"></div> <div data-options="region:'west',split:true" title="合同管理" style="width: 170px; border: 0px;"> <div class="easyui-accordion" id="MyContracts" data-options="fit:false,border:false" style="background-color: #f0f9fe;width:164px;" > <div title="<div onclick='GoIframePage(-1,this)' id='firstdiv' style='width:150px;height:22px'><span><img src='images/我的合同.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;' class='title'>合同列表</span></div>" style="background-color: #f0f9fe;" > <ul class="menuson"> <li class="active"><cite></cite> <a href="Contract/Form/My.aspx" target="ifmMain" > 我的合同</a> </li> <li class="active"><cite></cite> <a href="Contract/Form/Contract_YearsForm.aspx" target="ifmMain" > 多年期合同</a> </li> <li><cite></cite> <a href="Contract/Form/Contract_PersonReportForm.aspx" target="ifmMain" > 按个人统计</a> </li> </ul> </div> <div title="<div onclick='GoIframePage(2,this)' id='seconddiv' style='width:150px;height:auto'><span><img src='images/近期到期合同.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>近期到期合同</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> <div title="<div onclick='GoIframePage(3,this)' id='thirddiv' style='width:150px;height:auto'><span><img src='images/合同审批.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>合同审批</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> <div title="<div onclick='GoIframePage(4,this)' style='width:150px;height:auto'><span><img src='images/合同执行.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>合同执行</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> <div title="<div onclick='GoIframePage(5,this)' style='width:150px;height:auto'><span><img src='images/合同归档.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>合同归档</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> <div title="<div onclick='GoIframePage(6,this)' style='width:150px;height:auto'><span><img src='images/合同发票.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>合同发票</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> <div title="<div onclick='GoIframePage(8,this)' style='width:150px;height:auto'><span><img src='images/合同款项.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>合同款项</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> <!-- <div title="<div onclick='GoIframePage(9,this)' id='ninthddiv' style='width:150px;height:auto'><span><img src='images/leftico03.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>开通权限</span></div>" style="padding: 10px; background-color: #f0f9fe;" overflow: hidden;" data-options="collapsible:false"> </div> --> <div title="<div onclick='GoIframePage(7,this)' style='width:150px;height:auto'><span><img src='images/合同统计.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>合同统计</span></div>" style="background-color: #f0f9fe;"> <ul class="menuson"> <li class="active"><cite></cite> <a href="Contract/Form/Contract_SearchForm.aspx" target="ifmMain" > 合同详细内容统计</a> </li> <li><cite></cite> <a href="Contract/Form/Contract_ProductReportForm.aspx" target="ifmMain" > 按产品统计</a> </li> <li><cite></cite> <a href="Contract/Form/Contract_AreaReportForm.aspx" target="ifmMain" > 按部门区域统计</a> </li> <li><cite></cite> <a href="Contract/Form/Contract_BusinessReportForm.aspx" target="ifmMain" > 按业务员统计</a> </li> <li><cite></cite> <a href="Contract/Form/Contract_AreaBusinessReportForm.aspx" target="ifmMain" > 按部门业务员统计</a> </li> </ul> </div> <div title="<div onclick='GoIframePage(9,this)' style='width:150px;height:auto'><span><img src='images/合同审批.png'></span> <span style='color:#000;font-size:14px;font-weight:bold;'>高级辅助查询</span></div>" style="background-color: #f0f9fe;"> <ul class="menuson"> <li class="active"><cite></cite> <a href="Contract/Form/Contract_GetUserByProduct.aspx" target="ifmMain" > 按产品查询</a> </li> <li><cite></cite> <a href="Contract/Form/Contract_GetProductByUser.aspx" target="ifmMain" > 按用户查询</a> </li> </ul> </div> </div> </div> <div data-options="region:'center',title:'',iconCls:'icon-ok'"> <iframe name="ifmMain" id="ifmMain" style="width: 100%; height: 730px;" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="auto" allowtransparency="yes" src="#"></iframe> </div>
UI层调用自适应脚本：
$(function () { //iframe自适应脚本 adjustIframe("ifmMain") a = document.getElementById("ifmMain"); a.src = "Contract/Form/My.aspx"; $('.menuson li').removeClass('active'); $('.menuson:eq(0)').find('li:eq(0)').addClass('active'); }); //有些accordion被当做按钮使用，不能让其弹开，但是这样就无法调用onSelect事件，故采用此种方式调用单击事件进入相应页面 //触发此单击事件的div元素，必须设置宽度，否则只能点击文字才可实现跳转，单击图片不跳转 function GoIframePage(type, obj) { $('.accordion-header-selected').removeClass('accordion-header-selected'); if (type == '') { type = -1; } var url = ''; $('.menuson li').removeClass('active'); switch (type) { case 2: //easyui解析layout后的固定格式 $(obj).parent().parent().addClass('accordion-header-selected'); url = 'Contract/Form/Contract_Mature.aspx' break; case 3: //easyui解析layout后的固定格式 $(obj).parent().parent().addClass('accordion-header-selected'); url = 'Contract/Form/Contract_Examinationing.aspx' //url = 'Contract/Form/Contract_AuditForm.aspx' break; case 4: //easyui解析layout后的固定格式 $(obj).parent().parent().addClass('accordion-header-selected'); url = 'Contract/Form/OperatList.aspx' break; case 5: //easyui解析layout后的固定格式 $(obj).parent().parent().addClass('accordion-header-selected'); url = 'Contract/Form/Contract_Pigeonholing.aspx' break; case 6: //easyui解析layout后的固定格式 $(obj).parent().parent().addClass('accordion-header-selected'); url = 'Contract/Form/InvoiceNotAdd.aspx' break; case 8: //easyui解析layout后的固定格式 $(obj).parent().parent().addClass('accordion-header-selected'); url = 'Contract/Form/ContractNotReceive.aspx' break; } //此方式既可完成页面跳转，又可实现刷新页面，注意iframe的id是直接写出来的,而不是采用dom对象或者jquery获取的 if (url != '') { ifmMain.location.href = url; } } $(function () { var href = window.location.href; if (href.indexOf('?url') > 0) { var url = href.substring(href.lastIndexOf('?url=') + 5); //alert(url); url = url.replace('^^', '?'); if (url.indexOf('?') > 0) { url = url.replace('^', '&'); } else { url = url.replace('^', '?'); } //alert(url); //alert(url); var type = href.substring(href.lastIndexOf('^') + 1); $('.accordion-header-selected').removeClass('accordion-header-selected'); switch (type) { case '1': $('#firstdiv').parent().parent().addClass('accordion-header-selected'); break; case '2': $('#seconddiv').parent().parent().addClass('accordion-header-selected'); break; case '3': $('#thirddiv').parent().parent().addClass('accordion-header-selected'); break; case '9': $('#ninthddiv').parent().parent().addClass('accordion-header-selected'); break; } ifmMain.location.href = url; } });
js的自适应脚本：
//默认iframe框架是不能撑开高度的，如果需要让框架高度自适应需要用js实现 var adjustIframe = function (id) { //alert('adjustIframe'); var iframe = document.getElementById(id); var callback = function () { var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument; var iheight = Math.min(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高 //alert("window.innerHeight=" + (window.innerHeight || document.body.clientHeight)); //对于ie7的兼容性问题，给出固定高度 if (window.innerHeight == undefined) windowHeight = document.body.clientHeight; else windowHeight = window.innerHeight; //alert("iheight=" + iheight + "windowHeight=" + iheight); //100是目前ifram外层上侧的高度 if (iheight < windowHeight - 100) iheight = windowHeight - 100; //else iheight = iheight; //alert('-----'+iheight+'---innerHeight:'+window.innerHeight); //加20的原因是合同编辑之后会增加高度，那部分都是在页面中做的，不会触发iframe的onload iframe.style.height = (iheight+6) + "px"; //由于iframe被easyui的layout包裹，因此需要重置一下layout高度 setHeight(); } if (iframe.attachEvent) { iframe.attachEvent("onload", callback); } else { iframe.onload = callback; } }
setHeight()方法：
//自适应高度 function setHeight() { var c = $('#cc'); //alert(p.panel('panel')) var p = c.layout('panel', 'center'); // get the center panel //alert(p.panel("panel")) if (p != null) if (p.panel("panel") != null) { var oldHeight = p.panel("panel").outerHeight(); p.panel('resize', { height: 'auto' }); var newHeight = p.panel("panel").outerHeight(); //alert("newHeight:" + newHeight + "oldHeight:" + oldHeight) c.layout('resize', { height: (c.height() + newHeight - oldHeight) }); } }
如果是在子页面调用自适应方法，多加一个parent即可
$(function () { //调用自适应iframe方法 window.parent.adjustIframe("ifrMain"); }
