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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
使用js画图之画切线
Jan 12 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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 HTML代码串截取代码
2008/12/29 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP多线程类及用法实例
2014/12/03 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
django文档学习之applications使用详解
2018/01/29 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python 实现识别图片上的数字
2019/07/30 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
不尊敬老师的检讨书
2014/12/21 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers