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="返回" >


阅读更多
文章标签: jsp js iframe
个人分类: 代码积累
想对作者说点什么? 我来说一句

jsp 刷新父页面

2011年12月09日 1KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭