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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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
PHP4之真OO
2006/10/09 PHP
用PHP产生动态的影像图
2006/10/09 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
php取出数组单个值的方法
2018/03/12 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
Document 对象的常用方法
2009/07/31 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
解决Vue动态加载本地图片问题
2019/10/09 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python实现简易通讯录修改版
2018/03/13 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
高一英语教学反思
2014/01/22 职场文书
李白故里导游词
2015/02/12 职场文书
2015年纪委工作总结
2015/05/13 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书