个人中心
gpt4 book ai didi

JavaScript弹出窗口方法汇总

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript弹出窗口方法汇总由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

1.无提示刷新网页:

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

2. javascript刷新页面的方法:

?
1
window.location.reload();

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

?
1
window.opener.location.reload()

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

?
1
window.dialogArguments.location.reload();

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

?
1
window.open(pageURL,name,parameters)

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

?
1
2
3
4
5
6
<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 | 窗口被激活后是否浮在其它窗口之上    。

?
1
2
3
4
5
6
7
8
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内容的非模态对话框.

使用方法:

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

参数说明:

sURL-- 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 vArguments-- 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 sFeatures-- 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是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 } ［ＩＥ５＋］：是否可被改变大小。默认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页面:

?
1
2
3
4
5
<script>
var obj = new Object();
obj.name= "jb51" ;
window.showModalDialog( "modal.htm" ,obj, "dialogWidth=200px;dialogHeight=100px" );
</script>

modal.htm页面:

?
1
2
3
4
<script>
var obj = window.dialogArguments
alert( "您传递的参数为：" + obj.name)
</script>

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

parent.htm页面代码:

?
1
2
3
4
5
6
7
8
<script>
str =window.showModalDialog( "modal.htm" ,, "dialogWidth=200px;dialogHeight=100px" );
alert(str);
</script>
modal.htm
<script>
window.returnValue= "http://www.zzvips.com" ;
</script>

例子:

?
1
2
3
4
5
6
7
8
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页面加入如下语句 。

?
1
2
3
4
5
<%
    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.无提示关闭页面的方法:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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弹出窗口方法汇总的文章就讲到这里了,如果你想了解更多关于JavaScript弹出窗口方法汇总的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： 详解Ubuntu16.04安装Docker、nvidia-docker的教程
文章推荐： python 爬取微信文章
文章推荐： 在VMware Workstation Pro中搭建server虚拟机(图文教程)
文章推荐： python生成验证码图片代码分享
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com