JavaScript新窗口与子窗口传值详解

 更新时间:2014年02月11日 15:45:23   作者:  
这篇文章主要介绍了JavaScript新窗口与子窗口之间的传值,需要的朋友可以参考下
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>

相关文章

  • JS仿QQ好友列表展开、收缩功能(第一篇)

    JS仿QQ好友列表展开、收缩功能(第一篇)

    这篇文章主要介绍了JS仿QQ好友列表展开、收缩功能(第一篇),需要的朋友可以参考下
    2017-07-07
  • uniapp H5 https跨域请求实现

    uniapp H5 https跨域请求实现

    这篇文章主要介绍了uniapp H5 https跨域请求实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JS实现判断数组是否包含某个元素示例

    JS实现判断数组是否包含某个元素示例

    这篇文章主要介绍了JS实现判断数组是否包含某个元素,涉及javascript属性操作与正则判断相关使用技巧,需要的朋友可以参考下
    2019-05-05
  • JavaScript实现简单表单验证案例

    JavaScript实现简单表单验证案例

    这篇文章主要为大家详细介绍了JavaScript实现简单表单验证案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JavaScript 字符串常用操作小结(非常实用)

    JavaScript 字符串常用操作小结(非常实用)

    这篇文章主要介绍了JavaScript 字符串常用操作的知识,包括字符串截取,查找类的方法,对js字符串操作相关知识感兴趣的朋友一起学习吧
    2016-11-11
  • 超级详细的webpack Plugin讲解

    超级详细的webpack Plugin讲解

    plugin是插件的意思,通常是用于对某个现有的架构进行扩展,下面这篇文章主要给大家介绍了关于webpack Plugin的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 微信小程序使用form表单获取输入框数据的实例代码

    微信小程序使用form表单获取输入框数据的实例代码

    这篇文章主要介绍了微信小程序使用form表单获取输入框数据的实例代码,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • js获取指定时间的前几秒

    js获取指定时间的前几秒

    本文主要介绍了根据一张图片的拍摄时间获取到这个时间前二后三的一个五秒钟的视频信息的实例方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

    JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

    这篇文章主要介绍了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 原生JS实现拖拽照片墙

    原生JS实现拖拽照片墙

    这篇文章主要为大家详细介绍了原生JS实现拖拽照片墙,实现照片互换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论