关闭子窗口父窗口刷新

最新推荐文章于 2025-06-19 14:24:06 发布

youngage

最新推荐文章于 2025-06-19 14:24:06 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb项目开发文章标签： js 父窗口子窗口刷新

本文链接：https://blog.youkuaiyun.com/youngage/article/details/44537047

JavaWeb项目开发专栏收录该内容

36 篇文章

订阅专栏

本文介绍了两种方法来实现子窗口关闭时刷新父窗口。方法一是直接使用window.open()方法，通过window.opener.location.reload()和window.close()实现。方法二是利用layer的iframe层，通过parent.layer.close(index)和parent.location.reload()完成刷新与关闭操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、方法一：使用window.open()方法。

在父窗口中的html代码：

在父窗口中的js代码，通过window.open()打开子窗口：

$("#addnews").click(function(){
var url='manage/newsAdd.jsp?userId=<%=user.getNumber()%>'; //转向网页的地址;
var name=''; //网页名称，可为空;
var iWidth=700; //弹出窗口的宽度;
var iHeight=400; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
var iTop = (window.screen.height-30-iHeight)/2; //获得窗口的垂直位置;
var iLeft = (window.screen.width-10-iWidth)/2; //获得窗口的水平位置;
window.open(url,name,'height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
});

子窗口中的html代码：

<%
String result = (String) request.getParameter("res");
%>
<div class="container">
<form method="post" action="NewsAdd?userId=<%=userId%>" id="newsform">
<div class="panel panel-primary" >
<textarea id="newsContent" name="newsContent" required="required" oninvalid="setCustomValidity('请输入新闻内容！')" oninput="setCustomValidity('')"
autofocus="autofocus" placeholder="请输入滚动新闻内容" rows="10" cols="60" style="border:0;"></textarea>
</div>
</div>
<div style="margin:20px auto;">
<input class="btn btn-primary" type="submit" value="提交" id="submitbtn" /> 
      
<button class="btn btn-default" onclick="window.close()" id="cancel">取消</button>
</div>
</form>
</div>
</div>
子窗口中的js代码：
<script>
$(document).ready(function(){
var result = <%=result%>;
if(result==1){ //上传成功，登录成功等等
window.opener.location.reload();
window.opener=null; //刷新父窗口，关闭子窗口
window.close();
}
});
</script>

这种方法没有采用遮蔽效果。

二、方法二：使用layer （http://sentsin.com/jquery/layer/ ）的iframe层

首先在父窗口和子窗口页面添加<script src="Resources/layer/layer.min.js"></script>

在父窗口中的html代码：

在父窗口中的js代码，通过iframe()打开子窗口：

$('#addnews').on('click', function(){
$.layer({
type: 2, //iframe
shade: [0.5,'#000'],
fix: false,
title: '添加一条记录',
maxmin: false,
border: [0],
closeBtn: [0, true],
fadeIn: 300,
iframe: {src:'manage/newsAdd.jsp?userId=<%=user.getNumber()%>',scrolling: 'no'},
area: ['580px' , '430px'],
close: function(index){ //点击layer右上角关闭按钮触发的事件
location.assign('NewsModify?userId=<%=user.getNumber()%>');
}
});
});

子窗口中的html代码：

<%
String result = (String) request.getParameter("res");
%>
<div class="container">
<form method="post" action="NewsAdd?userId=<%=userId%>" id="newsform">
<div class="panel panel-primary" >
  <textarea id="newsContent" name="newsContent" required="required" oninvalid="setCustomValidity('请输入新闻内容！')" oninput="setCustomValidity('')"
autofocus="autofocus" placeholder="请输入滚动新闻内容" rows="10" cols="60" style="border:0;"></textarea>
</div>
</div>
<div style="margin:20px auto;">
<input class="btn btn-primary" type="submit" value="提交" id="submitbtn" /> 
      
<button class="btn btn-default" onclick="window.close()" id="cancel">取消</button>
</div>
</form>
</div>
</div>
  子窗口中的js代码：
$(document).ready(function(){
var result = <%=msg%>;
var index = parent.layer.getFrameIndex(window.name);
if(result==1){ //上传成功
parent.location.reload(); //刷新父窗口
parent.layer.close(index);
}

$("#cancel").click(function(){
parent.layer.close(index);
});
});