联动操作主要分为两个方面:1)父页面控制子页面。2)子页面操作父页面
最典型的应用就是:当我登录一个系统后,打开了多个子页面,在我退出系统时,子页面自动关闭而不需要我手动一个一个的关闭子页面
对于这种需求在大型的web系统中非常常见。下面我们就来给出一个web调度台的实际应用
在web调度台中,有一个设置按钮,当用户点击这个按钮后,会用新的标签页打开一个设置的页面。当用户点击退出按钮时,子页面自动关闭。
那么这种效果是如何实现的呢?
我们熟悉HTML的都知道,打开新的窗口有多种方式,其中有一个是window.open()方法,通过api我们知道这个方法接收三个参数并且有一个返回值
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
那么我们就可以通过返回值的对象来判断子窗口的状态和属性了
在父页面的js中写上以下代码:
//子窗口
var windowArray = new Array();
/**
* 设置功能
* 响应设置按钮事件
*/
$(document).ready(function(){
$(".setting").click(function(){
//设置窗口只能打开一个
if(windowArray.length > 0)
{
closeAllWindows();
}
var win = window.open(path + '/set.jsp?scheduleNum=' + scheduleNumber, 'setting_window', '');
windowArray[windowArray.length] = win;
});
});
然后在退出按钮增加事件:
$(document).ready(function() {
//退出、关闭标示; 1退出 2关闭
var exit_close = "2";
//退出时提示确认信息
$("#logout_btn").click(function(e) {
exit_close = "1";
logoutSure(e);
});
//浏览器刷新前,弹出提示确认信息
window.onbeforeunload = function(e){
console.log("beforeun");
if(exit_close == "2")
{
logoutSure(e);
}
};
//浏览器关闭前,弹出提示确认信息
window.onunload = function(e){
console.log("un");
if(exit_close == "2")
{
$("#login").submit();
}
};
});
function logoutSure(e){
if (confirm("请确认是否退出?")) {
closeAllWindows();
$("#login").submit();
return true;
}
else
{
e.returnValue = false;
return false;
}
}
/**
* 退出时关闭子窗口
*/
function closeAllWindows() {
for (var i = windowArray.length - 1; i >= 0; i--) {
if (windowArray.length <= 0)
break;
var windowRef = windowArray[i];
if ((windowRef != null) && (windowRef.closed == false)) {
windowRef.close();
}
windowArray.pop();
}
}
以上就是利用父页面操控子页面的案例。
那么大家一定会想:如果用子页面控制父页面呢? 接下来就讲讲这个
子页面的window对象有个属性是window.opener这个操作是:设置或获取创建当前窗口的窗口的引用,也就是子页面可以通过这个获取父页面对象的引用了,
接下来我们就展现一下web调度台的实际应用。
在设置页面我们会管理组,而增加、修改、删除组的信息时,都需要主页面刷新左边的组信息。这就需要子页面在进行一些动作时要能通话父页面
在父页面加入以下代码:
/**
* 在设置页面增加组时,更新组名
*/
function addGroupName(name)
{
console.log("add group name is : " + name);
var lis = new Array();
lis = $("li");
for(var i = 1; i < lis.length; i++)
{
if($(lis[i]).find("a").attr("class").indexOf("mod") == -1)
{
$(lis[i]).find("a")[0].innerHTML = name;
$($(lis[i]).find("a")[0]).addClass("mod");
break;
}
}
}
在子页面加入以下代码:
/**
* 校验组名是否重复
*/
function checkAddGroup()
{
$("#addGroupBtn").click(function(){
var newName = $("input[name='groupname']");
var groupName = newName.val();
for(var i = 0; i < groupList.length; i++)
{
if(groupName == groupList[i])
{
$("#errotMsg").text("组名重复");
$(newName).addClass('error_input');
return false;
}
}
//让主页面组名更新
top.window.opener.addGroupName(groupName);
$(".myform_add").submit();
});
分享到:
相关推荐
TreePanel的checkbox节点操作及父子节点联动的演示DEMO,前面那个有Bug,选中子节点时,没能选择父节点。 这个版本修正了
treeview父子节点联动,javascript实现。
TreeView父子联动效果保持节点状态一致 .files.rarTreeView父子联动效果保持节点状态一致 .files.rar
TreePanel的checkbox节点操作及父子节点联动的演示DEMO
javascript父子页面传参方法,很简单的一个DEMO,大家可以看看哦。
在平时的开发中,往往需要源页面和打开文件的目标页面之间需要数据的传递.在这个示例中就可以很好地解决数据传递的问题.希望能给大家带来帮助!!
NULL 博文链接:https://block.iteye.com/blog/625772
2018最新省市县三级联动,同表父子级SQL语句。可以方便很多不想创建3个表的伙伴们。
用途:把父页面的数据表格中的指定行数据传递到子页面,在子页面中把数据传递到父页面。内有项目一个,说明文本一个。
Web开发中的window.open父子窗口传值问题 部署在tomcat中进行
asp.net父子页面传值,资源共享是为了共同进步, 希望帮助需要的兄弟。
HTML父子页面
(js)父子页面相互调用总结(js)父子页面相互调用总结(js)父子页面相互调用总结(js)父子页面相互调用总结
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <...
操作系统进程创建父子进程实验报告.pdf
javascript-TreeView父子联动效果保持节点状态一致
全国地区省市区街道四级 数据库 父子关系 可以直接导入 可用于多级联动
MFC TREE控件实现父子联动选中功能:即父选中则子全选中,子全选中则父选中参考代码,注:点击时需点击文字,暂时没去研究其原因 代码参考博客CSDN:https://blog.csdn.net/zggzgw/article/details/80515246
本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本。 还可点击此处本...
程序包含:主对话框上粘贴子对话框操作,通过改变组合框上选项,更新主对话框上子对话框,有详细注释,大家共同学习