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和s3captche实现一个水果名字的验证
Aug 14 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
JsRender实用入门教程
Oct 31 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue跨域解决方法
Oct 15 Javascript
原生JS实现九宫格抽奖
Sep 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP Include文件实例讲解
2019/02/15 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python自动下载图片的方法示例
2020/03/25 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
航空学院求职信
2014/06/11 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
未婚证明格式
2015/06/15 职场文书
建筑工程催款函
2015/06/24 职场文书
个人工作决心书
2015/09/22 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
详解PyTorch模型保存与加载
2022/04/28 Python