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高级编程的最佳实践详解
Mar 23 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
JS实现可视化文件上传
Sep 08 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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 number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python3处理HTTP请求的实例
2018/05/10 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python pandas生成时间列表
2019/06/29 Python
python简单实现9宫格图片实例
2020/09/03 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
《雕塑之美》教学反思
2014/04/24 职场文书
感恩教育月活动总结
2014/07/07 职场文书
迎国庆演讲稿
2014/09/05 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
爱国主义影片观后感
2015/06/18 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电