用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口

今天在网上看到这篇文章，感觉很少会用到，但毕竟还是有些人需要这样的功能的，否则就不会有这篇文章，这篇文章主要是解决以下问题：


代码如下:

1.点击一个可以打开新窗体的链接，如何实现如果窗体已打开，则将焦点转到已打开的窗体，否则打开新窗体。难点：如何判断窗体已打开，及将将打开的窗体Active？  
2.如何实现一个主窗体关闭时，将所有 打开的其他相关窗体一起关闭？

实现要点： 
1. window.open 会返回新打开窗口的 window 对象。 
2. 实现一个模拟的简单 HashMap 存储子窗口的 window 对象。 
3. 每次 open 的时候，检索此 HashMap，确定子窗口是否已存在。 
4. 若存在则直接切换焦点 (window.focus) 。
5. 若不存在，则 open 一个。 
6. 对于4，有可能子窗口已关闭，故采取了点技巧，先调用其 focus （其实可以任意方法），若出错，则也open 一个。
7. 关闭parent 的时候，遍历 HashMap，尝试关闭所有子窗口。 
8. 所有操作在父窗口实现。 
9. 整个实现原理其实很简单，只要需要熟悉js和dhtml，然后注意细节问题处理。

目前 IE 6 sp1 测试通过，FF 由于不支持 window.focus 故不适合使用。

Parent window

function openWin() {
//debugger;
var sltWins = document.getElementById("sltWins");
var url = sltWins.value;
var winName = url.replace('.', '_');
var win;
win = winMap[winName];
try {
win.focus();
}catch(e) {
// alert(e.message);
// we need to open a new window when the child window has not
// been opened or the child window has been close.
// as to the later, you also can implements some method that notices the parent window
// to remove the child window from our winMap object when it is closing.
// but it's a piece of hard work, i think so, because you must
// add the notice codes to all the child windows
//
win = window.open(url, winName, "top=100,left=100,width=400,height=300");
winMap[winName] = win;
//
if(!win) {
alert("Sorry, fail to open the window.Some unexpected error occurs.");
}
else {
// i try to bind a callback function to the child window's unload event
// unfortunately, it seems not to work.
// win.onunload = function() {
// try {
// alert(opener.winMap[winName]);
// opener.winMap[winName] = null;
// alert(opener.winMap[winName]);
// } catch(e) {
// // alert(e.message);
// }
// };
win.focus();
}
}
}

// stores the opened window object
var winMap = new Object();
//winMap["TestedKey"] = "TestedValue";
window.onunload = function() {
// try to close all child windows.
for(var propName in winMap) {
try {
winMap[propName].close();
}catch(e) {
//alert(e.message);
}
}
}

Maintaining the Parent window and Multi Child windows as in WinForm

funcions:

  1. Open the same child window once.
  2. Close all the child windows when the parent window is closing.

Child window:

#1
#2

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

打包文件下载

赞 (0)

相关推荐

  • JavaScript子窗口ModalDialog中操作父窗口对像

    在ModalDialog中操作父窗口对象 1.不能使用window.parent Window.parent是用来在frame中进行操作的,在对话框中不能用来操作父窗口对象 2.正确的做法 调用modaldialog时通过传参数的方式操作 例: 需求 父窗口页面为a.html 子窗口页面为b.html.a.html中有文本框id为test1,在打开的对话框中点击按钮,将a.html的文本框值改为"子窗口值". 实现 打开对话框时把test1作为参数传给子窗口,在子窗口中获取参数,将参数

  • 用javascript父窗口控制只弹出一个子窗口

    近来网上经常流传一些关于如何在父窗口控制只弹出一个子窗口 问题,我查看了一些,大部分都是只能解决部分或者很麻烦,还不算完美.比如有人是实现的这样,使用的是Cookie,以下是例子. 主页上做了一个弹出窗口,如何使其只弹出一次,返回主页时不再弹出了. --------------------------------------------------------------- <script> window.open("http://www.yeboss.com.cn",&q

  • js父窗口关闭时子窗口随之关闭完美解决方案

    最近,遇到一个权限管理的系统.由于权限管理的系统和本来的系统风格不一致,所有新打开一个窗口.问题就来了,admin注销之后,权限管理的窗口没有关闭.其他普通用户登录以后,仍然可以操作权限管理的窗口. 问题简化:admin注销的时候,或者main.html关闭的时候,打开的所有新窗口一起关闭.问题就解决了 直接看代码吧: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h

  • js 父窗口控制子窗口的行为-打开，关闭，重定位，回复

    测试的时候,注意当前目录中,有代码中的html文件. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • js关闭父窗口时关闭子窗口

    在父窗口写: 复制代码 代码如下: var sonid = window.open ('"+ url2 + "', 'newwindow', 'height=108, width=200, top="+ top + ",left=" + left+ ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, "+ "status=no,titlebar

  • jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");

  • JavaScript中的子窗口与父窗口的互相调用问题

    注意:要用open打开才行,如果用openModal打开则会访问不到opener. open的参数: window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') 参数说明 'page.html' 弹出窗口的文件名; 'newwindow' 弹出的新窗口的名字,非必须,可用

  • JavaScript子窗口调用父窗口变量和函数的方法

    本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法.分享给大家供大家参考.具体如下: 示例1:子窗口是新打开的窗口 父窗口: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.

  • JavaScript实现弹出子窗口并传值给父窗口

    新建父窗口页面: 加入以下脚本 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>First</title> </head> <script type="text/javascript"> function ShowDialog(Url) {    

  • 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口

    今天在网上看到这篇文章,感觉很少会用到,但毕竟还是有些人需要这样的功能的,否则就不会有这篇文章,这篇文章主要是解决以下问题: 复制代码 代码如下: 1.点击一个可以打开新窗体的链接,如何实现如果窗体已打开,则将焦点转到已打开的窗体,否则打开新窗体.难点:如何判断窗体已打开,及将将打开的窗体Active?   2.如何实现一个主窗体关闭时,将所有 打开的其他相关窗体一起关闭? 实现要点:  1. window.open 会返回新打开窗口的 window 对象.  2. 实现一个模拟的简单 Hash

  • javascript在当前窗口关闭前检测窗口是否关闭

    在当前窗口关闭前,检测当前窗口是否关闭 <pre name="code" class="html"><pre name="code" class="html"><HTML><HEAD> <script Language="JavaScript"> window.onbeforeunload=function(event){ alert("

  • JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法.分享给大家供大家参考,具体如下: 在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口. 这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件. 比如下图的效果: 在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会. 在新窗口的地址栏不可以编辑,不能被调

  • 不使用JavaScript实现菜单的打开和关闭效果demo

    不使用JavaScript实现菜单的打开和关闭效果demo

    我在写有菜单栏的网页时,基本都会用响应式设计来适配移动端,例如把不重要的菜单选项隐藏,或者创建一个菜单按钮来控制的菜单的打开和关闭之类的.而我之前一直是使用JavaScript来实现菜单的打开和关闭的,但最近在网上看到有人使用CSS和HTML来实现这一功能,让我真正的感受到手里只要有一把锤,什么都可以做钉子. 实现之前先来看一下HTML标签和输入类型: label <label> 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可

  • JavaScript实现提交模式窗口后刷新父窗口数据的方法

    本文实例讲述了JavaScript实现提交模式窗口后刷新父窗口数据的方法.分享给大家供大家参考,具体如下: 有些时间,按需求设计,一个窗口中,点击按扭,弹出模式窗口,在模式窗口中,添加完数据后(提交),关闭模式窗口,并且刷新父窗口,而恰恰模式窗口并不支持window.opener,所以无法获得父窗口,也就是说无法在关闭模式窗口后,来得到父窗口,但是可以借助showModealDialog的返回值来判断是否刷新,当调用showModealDialog时,父窗口代码会停在这一行,当弹出的模式窗口关闭

  • JavaScript弹出新窗口后向父窗口输出内容的方法

    本文实例讲述了JavaScript弹出新窗口后向父窗口输出内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open方法打开一个弹出窗口,然后通过弹出窗口的句柄向父窗口输出信息的方法 <!DOCTYPE html> <html> <head> <script> function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow

  • javascript关于open.window子页面执行完成后刷新父页面的问题分析

    本文实例分析了javascript关于open.window子页面执行完成后刷新父页面的方法.分享给大家供大家参考.具体分析如下: 主页面: <input id="btnAdd" type="button" onclick="openWin();" value="添加" /> 在js中有如下代码: function openWin() { window.open('addInfo.jsp', '_blank', '

  • javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

    本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/htm

  • JS检测window.open打开的窗口是否关闭

    在开发中遇到需要在打开窗口的同时给父窗口添加遮罩防止用户误操作,而在窗口关闭时需要去掉父窗口的遮罩以便用户操作. 所以可以利用setInterval()来周期性的检测打开的窗口是否关闭. 如果检测到窗口已经关闭,则需要掉用clearInterval()终止监测行为. 1.创建一个新的窗口: var newWin = window.open(url,name,"height=500,width=1000"); $("body",parent.document).mas

  • 在PyCharm导航区中打开多个Project的关闭方法

    打开一个Project在导航区带出多个Project将会影响PyCharm的运行速度,解决这个问题的方式只打开一个即可.有时候打开一个Project将会带出多个Project, 解决方法如下: 首先,打开PyCharm出现下列情况,这里有三个Project: 如果想关闭,打开其中一个,先右键Flie全部关闭,弹出以下内容: 其次,点击红Close Project in Current Window,此时将全部Project关闭. 然后,到这个Project保存的位置中将 ".idea"

随机推荐