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 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
JavaScript Split()方法
Dec 18 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php中in_array函数用法分析
2014/11/15 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
高中数学教师求职信
2013/10/30 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
党校学习思想汇报
2014/01/06 职场文书
银行领导证婚词
2014/01/11 职场文书
抽奖活动主持词
2014/03/31 职场文书
初中英语演讲稿
2014/04/29 职场文书
酒店管理求职信
2014/06/09 职场文书
军训口号
2014/06/13 职场文书
社区志愿者活动总结
2014/06/26 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
Python获取字典中某个key的value
2022/04/13 Python