window.open || window.showModalDialog || window.showModelessDialog
http://dwcmayday201204063551.iteye.com/blog/1621751
http://www.cnblogs.com/zhangyi85/archive/2009/09/03/1559594.html
http://blog.csdn.net/dotnetsong/article/details/2684854
http://dwcmayday201204063551.iteye.com/blog/1621751
http://blog.csdn.net/dotnetsong/article/details/2684854
一、前言
要打开一个可以载入页面的子窗口有三种方法,分别是window.open、window.showModalDialog和window.showModelessDialog。
open方法就是打开一个页面,可以说同用url链接打开一个页面一样,不推荐使用,因为很多浏览器会拦截。
这里推荐使用的是window.showModalDialog和window.showModelessDialog,下面介绍二者的异同和用法。
二、 showModalDialog和showModelessDialog的区别
showModalDialog:被打开后就会始终保持输入焦点,除非对话框被关闭,否则用户无法切换到父窗口,类似alert的运行效果。
showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响,最多是被挡住一下而以。
三、怎样才让在showModalDialog和showModelessDialog里的超连接不弹出新窗口
在默认情况下,showModalDialog和showModelessDialog窗口中的链接都会导致打开一个新的窗口,但这不是我们需要的。
解决这个问题的方法是在被showModalDialog和showModelessDialog窗口调用的页面添加<base target="_self" />
如下:
<title>被打开的页面</title>
<base target="_self" />
四.、showModalDialog和showModelessDialog不使用缓存
showModalDialog和showModelessDialog在第一次打开页面时会默认缓存该页面,如果再次打开相同URL的页面的话,他们会直接调用缓存中的页面,而不是从服务器返回,要不使用缓存可进行如下配置:
<title>被打开的页面</title>
<meta http-equiv="pragram" content="no-cache"> //禁止浏览器从本地缓存中调阅页面,网页不保存在缓存中,每次访问都刷新页面。
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> //同上面意思差不多,必须重新加载页面
<meta http-equiv="expires" content="0"> //网页在缓存中的过期时间为0,一旦网页过期,必须从服务器上重新订
上面的配置不一定有效果,所以不推荐使用,最好的办法是在URL后加上一个时间戳,如下:
url = url + “&time=” + new Date();
五、如何刷新showModalDialog和showModelessDialog里的内容
在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码:
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要配合<base target="_self">使用,不然你按下F5会弹出新窗口的。
由于在刷新上处理起来非常不方便,所以使用ajax结合showModalDialog和showModelessDialog使用是非常适合的,建议结合使用。
六、 用javascript关掉showModalDialog(或showModelessDialog)打开的窗口
<input type="button" value="关闭" onclick="window.close()">
也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。
七、 showModalDialog和showModelessDialog数据传递技巧(例子用的是showModalDialog函数,showModelessDialog函数的用法一样)
1) 父窗体向打开的窗体传递数据一般使用url参数传递
2) 打开的窗体,即子窗体向父窗体进行数据传递有两种方法
(1) 第一种称为“函数法”,同调用一个函数并返回值一样
可以通过在被调用的页面(子页面)使用window.returnValue来设置返回值,返回值可以是任何值或对象,调用页面(父页面)直接获取返回值即可。
//父窗体js,直接通过函数获取返回值
- function openModalWindow(){
- var returnValue = window.showModalDialog("sonPage.aspx");
- alert(returnValue);
- }
//子窗体js,通过window.returnvalue来设置返回值
- function setReturnFatherPageValue(){
- window.returnValue = true;
- }
(2) 第二种称为“引用法”,通过传递父窗体的引用,我们可以操作父窗体上的所有东西
要使用引用法就必须在打开子窗体时将父窗体作为一个参数传递给子窗体,而在子窗体可以通过window.dialogArguments获取到传递过来的父窗体的引用。
//父窗体js,将整个父window作为参数传递给子窗体
- function openModalWindow(){
- window.showModalDialog("sonPage.aspx", window);
- }
//子窗体js,通过window.dialogArguments可以访问父window中的所有元素,它在这里代表了父window对象
- function openModalWindow(){
- var txt = window.dialogArguments.document.getElementByIdx("txt");
- var lab = window.dialogArguments.document.getElementByIdx("lab");
- txt.value = "sonPageChangedValue";
- lab.value = "isTheSame";
- }
八、 控制弹出窗体的样式
1) dialogHeight: 对话框高度,不小于100px
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。
举例如下:
window.showModalDialog("sonPage.aspx", "", "dialogHeight=350px;dialogwidth=410px;dialogLeft=0;dialogTop=25;help=no;resizable=no;status=no;scrollbars=no;");
或
window.showModalDialog("sonPage.aspx", window, "dialogHeight=350px;dialogwidth=500px;help=no;scrollbars=no;");
都可
九、 窗口高度自适应,这个需要在每个弹出框加载的页面放置,比较麻烦,而且不完善,使用时请调试好
- <script type="text/javascript">
- function resetDialogHeight(){
- if(window.dialogArguments == null){
- return; //忽略非模态窗口
- }
- var ua = navigator.userAgent;
- var height = document.body.offsetHeight;
- if(ua.lastIndexOf("MSIE 6.0") != -1){
- if(ua.lastIndexOf("Windows NT 5.1") != -1){ //alert("xp.ie6.0");
- window.dialogHeight=(height+102)+"px";
- }
- else if(ua.lastIndexOf("Windows NT 5.0") != -1){ //alert("w2k.ie6.0");
- window.dialogHeight=(height+49)+"px";
- }
- }
- else{
- window.dialogHeight=height+"px";
- }
- }
- </script>
然后如下设置即可:
- <body onload="resetDialogHeight()">
window.open || window.showModalDialog || window.showModelessDialog的更多相关文章
- window.location.Reload()和window.location.href 区别
首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false, ...
- window.location.href 和 window.location.replace 的区别
window.location.href 和 window.location.replace 的区别 1.window.location.href=“url”:改变url地址: 2.window. ...
- 详解;(function ($,window,document,undefined){...})(jQuery,window,document);
1.代码最前面的分号,可以防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后语法错误. 2.匿名函数(function(){})();:由于Javascript执行表达式是从圆括号里面 ...
- window.location.href和window.open的几种用法和区别
使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了. 一.location.href ...
- 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })
$(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...
- Pass value from child popup window to parent page window using JavaScript--reference
Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page wind ...
- window.open open new window?
when ever i use window.location.href=//some url it always open a new window, this only happens when ...
- javascript:window.location.replace 与 window.location.reload() 刷新页面的不同效果
今天早上我发现一个问题,当一个网页的地址最后面是一个#时(比如:http://www.baidu.com/go.asp#), 执行:window.location.replace(window.loc ...
- window.location.href 与 window.loaction.replace区别
window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...
随机推荐
- gcc编译时头文件库文件搜索顺序(转)
原文: http://blog.csdn.net/silentfly1987/article/details/6119195
- hdu3534,个人认为很经典的树形dp
题目大意为,求一个树的直径(最长路),以及直径的数量 朴素的dp只能找出某点开始的最长路径,但这个最长路径却不一定是树的直径,本弱先开始就想简单了,一直wa 直到我看了某位大牛的题解... 按照那位大 ...
- storm 事务和DRPC结合
示例代码: package com.lky.topology; import backtype.storm.Config; import backtype.storm.LocalCluster; im ...
- sourceTree初识
GUI for git|SourceTree|入门基础 目录 SourceTree简介 SourceTree基本使用 SourceTree&Git部分名词解释 相关连接推荐 一.SourceT ...
- UDP C/S编程
UDP C/S编程的步骤如下图所示与TCP C/S通信的区别在于:服务端没有设置监听和等待连接的过程.客户端没有连接服务端的过程.基于UDP的通信时不可靠地,面向无连接的,发送的数据无法确切知道对方收 ...
- ValidateBox( 验证框) 组件
本节课重点了解 EasyUI 中 ValidateBox(验证框)组件的使用方法,这个组件依赖于Tooltip(提示框)组件. 一. 加载方式//class 加载方式<input id=&quo ...
- C#获取当前路径的几种方法
C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...
- Kinect研究
1. 深度照相机 红外 + 2个摄像头. (1彩色摄像头,1红外发射,1接收) 红外捕捉深度. 2. OpenNI 某编程社区创建. 提供基本深度数据的访问.LGPL协议. 用户跟踪付费. 3. 问题 ...
- [C#]asp.net开发微信公众平台----目录汇总-持续更新
1.[c#]asp.net微信公众平台开发(1)数据库设计 2.[c#]asp.net微信公众平台开发(2)多层架构框架搭建和入口实现 3.[c#]asp.net微信公众平台开发(3)微信消息封装及反 ...
- SignalR小计
微软官方例子地址:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-a ...