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 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
prototype.js常用函数详解
Jun 18 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
彻底揭秘keep-alive原理(小结)
May 05 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
js window.event对象详尽解析
2009/02/17 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python中id函数运行方式
2020/07/03 Python
python Zmail模块简介与使用示例
2020/12/19 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
Python里面如何拷贝一个对象
2014/02/17 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
思想政治自我鉴定
2013/10/06 职场文书
学生会离职感言
2014/02/11 职场文书
2014年底个人工作总结
2015/03/10 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
导游词之太湖
2019/10/08 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python