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插件开发方法(初学者)
Feb 03 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
javascript常用的设计模式
Feb 09 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
js断点调试经验分享
Dec 08 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
js实现简单页面全屏
Sep 17 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
python验证码识别实例代码
2018/02/03 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
公积金转移接收函
2014/01/11 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
幼儿教师培训感言
2014/03/08 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
医院合作协议书
2014/08/19 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
个人道歉信大全
2019/04/11 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
MySQL 时间类型的选择
2021/06/05 MySQL
Python编程super应用场景及示例解析
2021/10/05 Python