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中强制执行toString()具体实现
Apr 27 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
webpack优化的深入理解
Dec 10 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
js实现头像上传并且可预览提交
Dec 25 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存储过程的方法集合(推荐)
2013/07/03 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
Python中的字符串替换操作示例
2016/06/27 Python
python妙用之编码的转换详解
2017/04/21 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
我的求职计划书
2014/01/10 职场文书
大学生校园创业计划书
2014/02/08 职场文书
家长学校实施方案
2014/03/15 职场文书
好学生评语大全
2014/05/05 职场文书
妇产科护理心得体会
2016/01/22 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python