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 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
php魔术变量用法实例详解
2014/11/13 PHP
laravel学习教程之存取器
2016/07/30 PHP
javascript globalStorage类代码
2009/06/04 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
python超简单解决约瑟夫环问题
2015/05/12 Python
Python自动登录126邮箱的方法
2015/07/10 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
教师评优事迹材料
2014/01/10 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
电台实习生求职信
2014/02/25 职场文书
活动总结报告格式
2014/05/09 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
工作证明格式范文
2015/06/15 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang