- 浏览: 316090 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (184)
- js (39)
- j2ee (10)
- sql (11)
- j2se (12)
- jquery (10)
- struts (5)
- spring (5)
- hibernate (5)
- LIFE (3)
- css (2)
- 杂 (5)
- log4j (1)
- Spring事务 (1)
- IT相关 (2)
- MyEclipse (0)
- 面试相关 (5)
- j2se java基础 (7)
- sso (1)
- lucene (1)
- axis2 (1)
- nginx (4)
- cache (1)
- HTML (4)
- springmvc (1)
- linux (2)
- zookeeper (5)
- liunx (1)
- hadoop (2)
- redis (1)
- maven (1)
- git (1)
- idea (1)
- mysql (2)
最新评论
-
bozch：
[b][b][b][b][b][b][b][b][b][b][ ...
synchronized测试 -
jveqi：
public class Test {
public st ...
base64 图片显示 -
jveqi：
国外有个调研：人临死前最后悔的事情是什么？排在第一位的是：这一 ...
转：软件的未来 -
jveqi：
[img][/img][url][/url]
来去_ -
bozch：
2
来去_
一、 前言
要打开一个可以载入页面的子窗口有三种方法，分别是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.getElementById("txt");
var lab = window.dialogArguments.document.getElementById("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">
/** * 模态窗口高度调整. * 根据操作系统及ie不同版本,重新设置窗口高度,避免滚动条出现. */
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()">
发表评论
-
js undefined NaN 判断
2024-04-19 09:57 67undefined 即未定义 js 中 没有声明 或者 声明 ... -
12306改版之后简单抢票软件的实现(转载)
2015-01-05 18:48 1692又到一年抢票时，各 ... -
JQuery 如何选择带有多个class的元素
2014-12-31 16:31 783http://www.penglig.com/post-27 ... -
html
2014-11-25 16:31 6281、e.stoppropagation 2、$('#mor ... -
jquery前台查看服务器端文件是否存在
2013-11-06 19:29 16381、 $.ajax({ url:'htt ... -
JS 得到选中的下拉列表的序号 或者 显示的内容
2013-03-21 15:18 1677// html 片段 <select id=&qu ... -
input中readOnly与disabled
2013-01-21 16:30 2560怎样使input中的内容为只读，也就是说不让用户更改里面的内 ... -
js Date 日期格式化（转）
2012-12-12 10:18 93152原文地址：http://blog.163.com/swi ... -
【转】js判断undefined类型,undefined,null,NaN的区别
2012-11-22 17:09 816js判断undefined类型今天 ... -
window.showModalDialog和window.dialogArguments
2012-10-17 17:36 904第一次使用。很爽的感觉。 弹出子窗口window. ... -
JS数据格式化保留两位小数的多种实现方法总结
2012-03-11 12:14 16178JS数据格式化是在进行web前端开发时常碰到的事情，特别是在数 ... -
转:超级实用且不花哨的js代码大全
2012-03-09 11:27 1116转:超级实用且不花哨的js代码大全 事件源对 ... -
判断ID是否存在
2011-08-24 17:17 923<!--StartFragment --> $( ... -
IE7右键粘贴值改变触发
2011-08-19 17:32 9821. $("#xxxid").bind( ... -
如何让textarea自动换行-注意wrap属性
2011-08-18 17:40 3495<!--content with mor ... -
jquery 鼠标事件
2011-08-17 17:19 845$(function(){ $('a').mousedown( ... -
UI datagrid URL参数变化，重新加载
2011-08-11 16:37 39711、UI datagrid URL参数变化，重新加载 ... -
20110803 js 未结束的字符串常量错误解决方法
2011-08-03 19:38 6911.JAVASCRIPT引用时,使用的字符语言不一致. 比如: ... -
textarea wrap
2011-07-26 14:32 1247通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按 ... -
easyUI 树展开
2011-07-23 18:39 845//展开组织机构 setTimeout(functi ...
相关推荐
Window.showModalDialog 和 Window.open 用法简介 Window.showModalDialog 和 Window.open 都是 JavaScript 中的方法，用于创建新窗口或对话框，下面分别介绍它们的用法和参数。 一、Window.open() 方法 Window....
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态
一个是window.showModalDialog()方法，后者是存在父子关系的一种弹出窗口，只有子窗关闭，父窗口才激活，并且可以传送参数和返回值。正好又温习一遍用法，顺便在此记录过程中遇到的问题。 基本介绍： ...
本文主要关注JavaScript中的两种弹出窗口技术：`window.open`和`window.showModalDialog`/`window.showModelessDialog`。 首先，`window.open`是JavaScript中最常见的用于打开新窗口的方法。它接受三个参数：`url`...
本文将深入探讨JavaScript中用于创建对话框的两种主要方法：`window.open`和`showModalDialog()`、`showModelessDialog()`。 首先，我们来看`window.open`函数。这个函数用于在新的浏览器窗口中打开一个页面，其...
在JavaScript中，弹出窗口通常指的是使用`window.open()`、`window.showModalDialog()`或`window.showModelessDialog()`等方法创建的新窗口。这些方法在Web应用中常用于实现一些交互性的功能，如用户确认、数据输入...
JavaScript还提供了两种特殊的对话框函数，`showModalDialog()`和`showModelessDialog()`，它们创建的对话框具有更多的交互性和控制性。`showModalDialog()`打开的窗口是模式化的，这意味着用户必须关闭对话框才能...
如： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的...
本文将深入探讨四种主要的方法：`showModelessDialog`、`window.open`、`showModalDialog`以及`iframe`，来实现这样的交互。 首先，我们来看`showModelessDialog`，这是一个在Internet Explorer浏览器中特有的API，...
IE提供了`showModalDialog`和`showModelessDialog`方法，Firefox不支持。可以改用`window.open`方法打开窗口。子窗口到父窗口的数据传递，使用`window.opener`。 7. **父元素访问差异**： IE使用`obj....
当然打开子窗口可用window.open()或window.showModalDialog()[与window.showModelessDialog()类似].若想将父窗口的数据传递到子窗口可用URL后带请求字符串即"?id1=qurey1&id2=query2",在子窗口中用window.location....
关于showModalDialog和showModelessDialog的使用，一个b/s结构的项目中用window.open弹出的窗口被一些广告拦截工具给拦截了，没办法就只能用showModalDialog来解决问题，但showModalDialog这个方法不好的就是页面间...
就是我们通过调用window.alert，window.confirm，window.prompt这些方法 所弹出的网页对话框，通过调用window.open，window.showModalDialog，window.showModelessDialog 所弹出的窗体。 之所以这样做是因为：浏览器...
IE支持`showModalDialog`和`showModelessDialog`打开模态和非模态窗口，Firefox不支持。替代方法是使用`window.open(pageURL,name,parameters)`来打开新窗口，如果需要传递参数，可以借助frame或iframe。 2. 总结 -...
以上就是网页弹出窗口设计的一些基本技巧和方法，包括`window.open()`、`showModalDialog()`、`showModelessDialog()`以及HTA的应用。熟练掌握这些技术，可以极大地提升网页的交互性和用户体验。在实际应用中，...
- **窗口**：IE支持`showModalDialog`和`showModelessDialog`，Firefox不支持。建议使用`window.open()`替代，需要传递参数时可借助frame或iframe。 2. **总结与建议** - **使用ID而非name**：在JavaScript中...
6. **`window.showModalDialog()` 和 `window.showModelessDialog()`**： 这两个方法可以以对话框的形式打开新窗口。`showModalDialog()`是模态对话框，阻止用户与原窗口交互，而`showModelessDialog()`是非模态...
创建非模态对话框则使用`window.showModelessDialog()`方法，它的用法与模态对话框相似，只是不返回`returnValue`，而是返回新窗口的引用，可以通过这个引用与非模态窗口进行交互。 控制对话框的大小和位置，可以在...
Response.Write("<script language='javascript'>window.open('aaa.aspx');</script>"); 这个方法可以打开一个新的页面，原窗口保留不变。 5.使用 JavaScript 进行跳转（替换原窗口） 使用 JavaScript 可以将...