JavaScript弹出窗口方法汇总


Posted in Javascript onAugust 12, 2014

本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助。详细方法如下:

1.无提示刷新网页:

大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才会刷新。
而有的页面不会提示,不弹出提示窗口,直接就刷新了.
如果页面没有form,
则不会弹出提示窗口
如果页面有form表单,
a)<form  method="post" ...> 
   会弹出提示窗口
b)<form  method="get" ...> 
   不会弹出  

2. javascript刷新页面的方法:

window.location.reload();

使用window.open()弹出的弹出窗口,刷新父窗口

window.opener.location.reload()

使用window.showDialog弹出的模式窗口

window.dialogArguments.location.reload();

3.javascript弹出窗口代码:
window.open()方式:
window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
基本语法:

window.open(pageURL,name,parameters)

其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)
 
示例:

<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>

脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。
请对照。

上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。

各项参数
其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。

参数 | 取值范围 | 说明
| |
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 | 窗口被激活后是否浮在其它窗口之上
  

function ShowDialog(url) {
  var iWidth=300; //窗口宽度
  var iHeight=200;//窗口高度
  var iTop=(window.screen.height-iHeight)/2;
  var iLeft=(window.screen.width-iWidth)/2;
  window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft);
 }

  
window.showModalDialog方式:

基本介绍:

showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法:

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明:

sURL--
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
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。

参数传递:

(1).要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
-------------------------------
parent.htm页面:

<script>
var obj = new Object();
obj.name="3water";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>

modal.htm页面:

<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>

(2)可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

parent.htm页面代码:

<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.3water.com";
</script>

例子:

function ShowDialog(url) {
  var iWidth=300; //窗口宽度
  var iHeight=200;//窗口高度
  var iTop=(window.screen.height-iHeight)/2;
  var iLeft=(window.screen.width-iWidth)/2;
  window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
 }

注意这里的第二个参数,window

4.模式窗口数据不刷新(缓存)问题

在jsp页面加入如下语句

<%
   response.setHeader("Pragma","No-Cache");
   response.setHeader("Cache-Control","No-Cache");
   response.setDateHeader("Expires", 0);
%>

5.模式窗口中,链接弹出新窗口问题:

◎_blank,在新浏览器窗口中打开链接文件。

◎_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。

◎_self,在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定。

◎_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架。

在</head>和<body>间加入<a href=“a.html”target="_blank "/>

6.无提示关闭页面的方法:

function CloseWin(){
  var ua = navigator.userAgent; var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
  if(ie){
 var IEversion = parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))));
  if( IEversion< 5.5){
  var str = '';
  document.body.insertAdjacentHTML("beforeEnd", str);
   document.all.noTipClose.Click();
  } else {
   window.opener =null; window.close();
  }
 }else{
 window.close()
 }
}

感兴趣的读者可以调试一下上述方法,相信会给大家带来一定的启发与帮助。

Javascript 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
浅谈javascript错误处理
Aug 11 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 #Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 #Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 #Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 #Javascript
JavaScript中跨域调用Flash的方法
Aug 11 #Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 #Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 #Javascript
You might like
FLASH 广告之外的链接
2008/12/16 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
Vue 全局loading组件实例详解
2018/05/29 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Python实现配置文件备份的方法
2015/07/30 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python学生管理系统
2019/01/30 Python
python线程池如何使用
2020/05/28 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python 写一个性能测试工具(一)
2020/10/24 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
希特勒的演讲稿
2014/05/23 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
《鲸》教学反思
2016/02/23 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python