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 left,right,mid函数
Jun 10 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js实现登录验证码
Dec 22 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
webpack4的迁移的使用方法
May 25 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
JS实现简单的表格增删
Jan 16 Javascript
JavaScript鼠标悬停事件用法解析
May 15 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
建立动态的WML站点(二)
2006/10/09 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python 流程控制实例代码
2009/09/25 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Django视图、传参和forms验证操作
2020/07/15 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
毕业生求职简历的自我评价
2013/10/23 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
学习心得体会
2014/01/01 职场文书
中专自我鉴定
2014/02/05 职场文书
党员承诺书范文
2014/05/19 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Python循环之while无限迭代
2022/04/30 Python