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' 弹出的新窗口的名字,非必须,可用空''代替;

height=100 高度; width=400 宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值;

toolbar=no 是否显示工具栏，yes为显示; menubar，scrollbars 表示菜单栏和滚动栏;

resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许;

status=no 是否显示状态栏内的信息（通常是文件已经打开）,yes为允许;

1、从子窗口中往父窗口传值

如父页面有一个控制的id是choosedProvider，那么这样可以把值传给父页面：

opener.document.getElementById("choosedProvider").value="Tom";

2、从父窗口传值给子窗口，如子窗口中有id为T的控件，此时可以用如下传值：

<script>
var newWindow;
function openWindow(url){
newWindow = window.open(“new.htm”, "", "width=400,height=300 ");
}
function changeChild(){
newWindow.document.getElementById("T").value="我变了";
}
</script>

3、子窗口关闭并刷新父口，这里有两种方式：

1)         子窗口关闭时关闭父窗口：

opener.location.reload();
window.close();

2)        父窗口去检测，子窗口是否已经关闭了，在设定的一段时间之后自动刷新：

<script>
var newWindow;
var timer;
function openWindow(url) {
    newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
    timer = setInterval("updateAfterClose()", 1000);
}
function updateAfterClose() {
    //父窗口去检测子窗口是否关闭，然后通过自我刷新，而不是子窗口去刷新父窗口
    if(newWindow.closed == true) {
    clearInterval(timer);
    self.location.reload(); // 主窗口刷新
    return;
    }
}
</script>

4、父窗口关闭的时候关闭子窗口。这个就是用方法去检测父窗口的onunload事件：

<script>
var newWindow;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
}
function closeChild()
{
newWindow.close();
}
</script>

在body加上onunload事件：

<body onunload="closeChild()">

5、子窗口中关闭父窗口，这个功能可能相对要少用一点：

<script>
function closeParent()
{
opener.close();
}
</script>
<input type=button value="关闭父窗口" onclick=closeParent()>

以上所述是小编给大家介绍的JavaScript中的子窗口与父窗口的互相调用问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 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&

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

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

  • 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

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

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

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

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

  • 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) {    

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

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

  • 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中找到子元素在父元素内相对位置的代码

    经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')

  • JavaScript中 this 指向问题深度解析

    JavaScript 中的 this 指向问题有很多文章在解释,仍然有很多人问.上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题. 与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说, 函数的调用方式决定了 this 指向 . JavaScript 中,普通的函数调用方式有三种:直接调用.方法调用和 new 调用.除此之外,还有一些特殊的调用方式

  • JavaScript中继承原理与用法实例入门

    本文实例讲述了JavaScript中继承原理与用法.分享给大家供大家参考,具体如下: 正统的面相对象的语言都会提供extend之类的方法用于出来类的继承,但Javascript并不提供extend方法,在Javascript中使用继承需要用点技巧. Javascript中的实例的属性和行为是由构造函数和原型两部分组成的,我们定义两个类:Person和zhangsan,它们在内存中的表现如下图1: 如果想让Zhangsan继承Person,那么我们需要把Person构造函数和原型中的属性和行为全部

  • JavaScript中的Window窗口对象

    JavaScript中的Window窗口对象 他是JavaScript中最大的对象,它描述的是一个浏览器窗口.一般要引用它的属性和方法时,不需要用"window.xxx"这种形式,而直接使用"xxx".一个框架页面也是一个窗口. Window窗口对象有如下属性: name 窗口的名称,由打开它的连接(<a target="...">)或框架页(<frame name="...">)或某一个窗口调用的 o

  • javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. 2.console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. 3.onsole里面的内容非常丰富,你可以在控制台输入:console,然后就可看到: Console {memory: Memo

  • 网页中可关闭的漂浮窗口实现可自行调节

    注释部分为广告的左右调节,可以自行设定 复制代码 代码如下: <!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> <

  • Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法

    Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法

    1.先使用Qt designer设计两个窗口,一个是主窗口,一个是子窗口   其中主窗口是新建-Main Window,子窗口是Dialog窗体. 两个窗口不能是同一类型,否则会崩溃. 并保存为EyeTracking_main.ui和EyeTracking_process.ui(因为我在做眼动追踪,因此窗体命名与此相关,后同),使用UIC工具转成.py文件. 2.写一个驱动函数调用两个窗体 主窗体Eyetracking_main.py from PyQt5 import QtCore, QtGu

  • JavaScript日拱算法题解滑动窗口的最大值示例

    JavaScript日拱算法题解滑动窗口的最大值示例

    目录 题目: 题解: 第一反应 JavaScript 实现 第二反应 JS 实现 小结: 题目: 给定一个数组 nums 和滑动窗口的大小 k,请找出所有滑动窗口里的最大值. 示例: 输入: nums = [1,3,-1,-3,5,3,6,7], 和 k = 3 输出: [3,3,5,5,6,7] 解释: 滑动窗口的位置 最大值 --------------- ----- [1 3 -1] -3 5 3 6 7 3 1 [3 -1 -3] 5 3 6 7 3 1 3 [-1 -3 5] 3 6

  • javascript实现的固定位置悬浮窗口实例

    本文实例讲述了javascript实现的固定位置悬浮窗口.分享给大家供大家参考.具体实现方法如下: <!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"&g

随机推荐