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


Posted in Javascript onFebruary 08, 2017

注意:要用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中的子窗口与父窗口的互相调用问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
js格式化时间的简单实例
Nov 27 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
深入理解js中的加载事件
Feb 08 #Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 #Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 #Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
You might like
PHP设计模式之装饰者模式
2012/02/29 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
JavaScript实现计数器基础方法
2017/10/10 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python遍历numpy数组的实例
2018/04/04 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Django REST framework内置路由用法
2019/07/26 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
节约电力资源的建议书
2014/03/12 职场文书
高三毕业寄语
2014/04/10 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2014年公务员工作总结
2014/11/18 职场文书
司机岗位职责
2015/02/04 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
小学班主任工作随笔
2015/08/15 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技