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 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
Vue 请求传公共参数的操作
Jul 31 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 中的类
2006/10/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
教师自荐书
2013/10/08 职场文书
高中开学感言
2015/08/01 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
VUE递归树形实现多级列表
2022/07/15 Vue.js