联动操作主要分为两个方面: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/ 可以从官网上下载最新版本。 还可点击此处本...
程序包含:主对话框上粘贴子对话框操作,通过改变组合框上选项,更新主对话框上子对话框,有详细注释,大家共同学习