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

原创 2017年01月22日 11:04:20

前言

       在工作中我们经常会遇到页面跳转,传参来实现复杂的业务逻辑.接下来,本文将分享自己在实践中应用的一个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="返回" >


html页面中iframe嵌套页面的父页面和子页面js方法互相调用

我们在写html页面或者说是jsp页面是,有时候需要在一个页面中使用iframe标签嵌套另一个页面,而两个页面有些数据需要交互,这个时候就会用到js技术,互相调用方法, 当我们在父页面中需要调用if...
  • u011159417
  • u011159417
  • 2017年08月25日 18:24
  • 4751

html 高手解决 <Iframe></frame>间的退回上一页面问题

window.history.method 演示一下:共有三个文件 Noname1.html内容如下: Noname2.html内容如下: 我是第二页进入第三页 N...
  • zhaohongx
  • zhaohongx
  • 2014年09月27日 08:18
  • 5133

JSP 返回上一页的几种方法

JSP 返回上一页的几种方法
  • ningjin1
  • ningjin1
  • 2017年01月11日 20:01
  • 8635

JSP页面中四种“返回按钮”的使用

列举4种实现返回按钮的形式,返回按钮出现在form表单中:   html:form method="post" action="mypath/action1.do?method=showIndex...
  • tongyuehong
  • tongyuehong
  • 2015年06月22日 16:32
  • 6902

jsp页面跳转用法和新窗口打开

方法一:self.location.href="/url" 当前页面打开URL页面location.href="/url" 当前页面打开URL页面windows.location.href="/url...
  • lv_hang515888
  • lv_hang515888
  • 2017年02月22日 16:00
  • 6672

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

前言        在工作中我们经常会遇到页面跳转,传参来实现复杂的业务逻辑.接下来,本文将分享自己在实践中应用的一个jsp页面跳转,动态改变主页面高度的例子来说明如何使用iframe标签. 1.在...
  • liugh_xian2016
  • liugh_xian2016
  • 2017年01月22日 11:04
  • 1035

iframe 父子窗口调用

顺序: window--document--body--元素 1. 子iframe中调用父中方法 :xxx() window.parent.xxx()  或者 parent.xxx()  2...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年05月11日 19:51
  • 783

jquery 子页面控制父页面IFRAME的高度

$(window.parent.document).find("#mainFrame").css("height",""+mainFrameheigth+"px");   jquery取得ifram...
  • qq_29663071
  • qq_29663071
  • 2017年04月18日 15:29
  • 4204

iframe自适应高度以及调用父子窗口的方法

iframe: 1.   高度与父窗口一致  自适应 function loginFrame(){
  • u012499210
  • u012499210
  • 2016年06月19日 17:29
  • 1094

全面兼容的Iframe 与父页面交互操作

全面兼容的Iframe 与父页面交互操作  父页面 Father.htm 源码如下: function fatherFunction() { alert("我是...
  • yimiyuangguang
  • yimiyuangguang
  • 2014年03月02日 00:51
  • 4105
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jsp页面跳转到子页面和返回上一页,附带动态改变父页面的iframe高度大小
举报原因:
原因补充:

(最多只允许输入30个字)