JavaScript新窗口与子窗口传值详解


Posted in Javascript onFebruary 11, 2014

window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
window.open(pageURL,name,parameters)
pageURL 为子窗口路径
name 弹出窗口的名字
parameters 为窗口参数(各参数用逗号分隔)
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

<pre code_snippet_id="182098" snippet_file_name="blog_20140210_1_6035784" name="code" class="javascript"><SCRIPT> 
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') 
</SCRIPT> </pre> 
<pre></pre> 
<h2><a name="t3"></a><span style="font-family:Microsoft YaHei; font-size:14px"><span style="color:rgb(76,76,76); line-height:28px; text-indent:32px"><span style="color:rgb(76,76,76); line-height:28px; text-indent:32px">二.</span></span></span><span style="font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px; text-indent:32px; color:rgb(76,76,76); line-height:28px">showModalDialog</span></h2> 
<pre></pre> 
<pre></pre>

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
sURL必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过
sFeatures 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
window.dialogArguments来取得传递进来的参数。

1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

//parent.htm

<pre code_snippet_id="182098" snippet_file_name="blog_20140210_2_3894881" name="code" class="javascript"><script> 
var obj = new Object(); 
obj.name="51js"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script> 
//modal.htm 
<script> 
var obj = window.dialogArguments 
alert("您传递的参数为:" + obj.name) 
</script></pre><p></p> 
<pre></pre> 
<p></p> 
<p>//-------------------------------<br> 
//2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:<br> 
//------------------------------</p> 
<p></p><pre code_snippet_id="182098" snippet_file_name="blog_20140210_3_4734696" name="code" class="javascript">//parent.htm 
<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script> 
//modal.htm 
<script> 
window.returnValue="http://www.bokee.com"; 
</script></pre><br> 
<br> 
<p></p> 
<p>1.在原来的窗体中直接跳转用<br> 
window.location.href="你所要跳转的页面";<br> 
2、在新窗体中打开页面用:<br> 
window.open('你所要跳转的页面');</p> 
<p><span style="color:#ff0000">window.history.back(-1);返回上一页 </span></p> 
<p><span style="color:#ff0000"><br> 
</span></p> 
<p><span style="color:#ff0000"><br> 
</span></p>
Javascript 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
ztree实现权限横向显示功能
May 20 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
JS继承定义与使用方法简单示例
Feb 19 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
jquery绑定事件不生效的解决方法
Feb 11 #Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 #Javascript
JS创建自定义表格具体实现
Feb 11 #Javascript
js实现div的切换特效上一个下一个
Feb 11 #Javascript
js中文逗号转英文实现
Feb 11 #Javascript
JS自调用匿名函数具体实现
Feb 11 #Javascript
js跳转页面方法实现汇总
Feb 11 #Javascript
You might like
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
详解jQuery中的事件
2016/12/14 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
高中军训感想800字
2014/02/23 职场文书
文化活动实施方案
2014/03/28 职场文书
学习雷锋倡议书
2014/04/15 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2014年共青团工作总结
2014/12/10 职场文书
单位接收函格式
2015/01/30 职场文书