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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
js对象的比较
Feb 26 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHP加密解密类实例代码
2016/07/20 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python中sleep函数用法实例分析
2015/04/29 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python中static相关知识小结
2018/01/02 Python
python批量赋值操作实例
2018/10/22 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
求职简历自荐信
2013/10/20 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
条幅标语大全
2014/06/20 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL