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 相关文章推荐
javascript实现轮显新闻标题链接
Aug 13 Javascript
javascript 写类方式之一
Jul 05 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
Vue中的Vux配置指南
Dec 08 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
深入理解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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
react路由配置方式详解
2017/08/07 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Python解决走迷宫问题算法示例
2018/07/27 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
如何在python中实现随机选择
2019/11/02 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
python求绝对值的三种方法小结
2019/12/04 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
财务人员个人求职信范文
2013/12/04 职场文书
幼儿教师培训感言
2014/03/08 职场文书
家长会标语
2014/06/24 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
争先创优个人总结
2015/03/04 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏