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实现
Feb 25 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
Vue关于组件化开发知识点详解
May 13 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 和 MySQL 时区的一点总结
2008/03/26 PHP
php使用websocket示例详解
2014/03/12 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
JS如何设置元素样式的方法示例
2017/08/28 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python中的默认参数详解
2015/06/24 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python获取本机所有IP地址的方法
2018/12/26 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python os.fork() 循环输出方法
2019/08/08 Python
关于python3中setup.py小概念解析
2019/08/22 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript