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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
javascript时区函数介绍
Sep 14 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 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
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
javascript回调函数详解
2018/02/06 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
python交互界面的退出方法
2019/02/16 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python 解析简单的XML数据
2020/07/24 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
介绍一下木马病毒的种类
2015/07/26 面试题
函授本科自我鉴定
2013/11/03 职场文书
工程款催款函
2015/06/24 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Python 统计序列中元素的出现频度
2022/04/26 Python