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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
JS交换变量的方法
Jan 21 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
优雅地使用loading(推荐)
Apr 20 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python帮你识破双11的套路
2019/11/11 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Django-imagekit的使用详解
2020/07/06 Python
python基于opencv 实现图像时钟
2021/01/04 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
销售经理工作职责范文
2013/12/03 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
公司搬迁通知
2015/04/20 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书