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 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
Vue通过input筛选数据
Oct 26 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
浅谈React高阶组件
Mar 28 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Vuex简单入门
2017/04/19 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
Vue Components 数字键盘的实现
2019/09/18 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python import用法以及与from...import的区别
2015/05/28 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
银行实习自我鉴定
2013/10/12 职场文书
车间机修工岗位职责
2014/02/28 职场文书
股东授权委托书范文
2014/09/13 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书