jsp页面跳转到子页面和返回上一页,附带动态改变父页面的iframe高度大小

前言

在工作中我们经常会遇到页面跳转,传参来实现复杂的业务逻辑.接下来,本文将分享自己在实践中应用的一个jsp页面跳转,动态改变主页面高度的例子来说明如何使用iframe标签.实现效果:



图片中智能园区的首页高度是2100px,当我选择菜单中的子页面时会把整个页面的宽度变为900px;

1.在主页面中设置相应的标签.

注意:主展示区的name="iframe_page"一定要和<a>标签里的target名字一样.如果需要href里携带参数,如:

(例子,与实现本页实现功能无关)在js中写window.location.href="${path}/Concrete/ConcreteClusteringClassificationQuery?userid="+userid+"&zxpxx="+zxpxx//这样就可携带参数(本页跳转),如果需要打开新页面使用window.open("url地址");
在子页面中用 userid="<%=request.getParameter("userid")%>"; zxpxx="<%=request.getParameter("zxpxx")%>";获取父页面传来的参数.

2.在主页面中设置改变调整高度的函数

我们可以发现,主展示区,也就是首页是一个jsp,高度是2100px,跳转后的子页面需要动态的改变id为iframeId的高度.

function GetParentWindowHight(type)
{
var oFrame =$("#iframeId");
if(type=='01'){
oFrame.height("650px");
}else if (type=='02'){
oFrame.height("1200px");
}else{
oFrame.height("900px");
}
}

3.子页面中调用父页面的函数来实现动态改变首页的大小.

我们主页面中加入改变iframe高度的函数,子页面调用它.

/**   子页面的初始化      **/
$(function(){
window.parent.GetParentWindowHight("01");//调用父页面的GetParentWindowHight方法.
});

这时,就会动态改变iframe框的大小.在实现跳转的同时动态加载子页面的大小.这里可以实现很多业务逻辑,不仅仅是改变iframe框的大小,eg:主页面向子页面传值,子页面接受参数实现自己的初始化查询等等.扩展会有很多实现逻辑,,在这里就不一一赘述.

4.返回上一页.

<input name="返回" type=button id="to_back" onClick="history.go(-1)" value="返回" >