JavaScript 팝업 창 방법_javascript 기술 요약

이 기사의 예는 비교 및 ​​참조를 위해 일반적으로 사용되는 JavaScript 팝업 창 방법을 요약합니다. 자세한 방법은 다음과 같습니다.

1. 메시지를 표시하지 않고 웹페이지를 새로 고칩니다.

일부 웹페이지를 새로 고칠 때 프롬프트 창이 나타나는 것을 알고 계셨나요? 새로 고치려면 "확인"을 클릭하세요.
일부 페이지는 메시지가 표시되지 않으며, 메시지 창을 띄우지 않고 바로 새로고침됩니다.
페이지에 양식이 없으면
프롬프트창이 뜨지 않습니다
페이지에 양식이 있는 경우
a)

프롬프트 창이 나타납니다
b) 팝업되지 않습니다

2. 자바스크립트를 사용하여 페이지를 새로 고치는 방법:

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은 하위 창 경로입니다.

이름은 자식 창 핸들입니다
매개변수는 창 매개변수입니다(각 매개변수는 쉼표로 구분됩니다)

예:

<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은 너비 100, 높이 400, 화면 상단에서 0픽셀, 화면 왼쪽에서 0픽셀, 도구 모음 없음의 새 창에서 열립니다. , 메뉴 표시줄 없음, 스크롤링 없음, 크기 조정 불가, 주소 표시줄 없음, 상태 표시줄 없음.

비교해주세요.

위의 예에는 일반적으로 사용되는 여러 매개변수가 포함되어 있습니다. 그 외에도 많은 매개변수가 있습니다. 4를 참조하세요.

다양한 매개변수

그 중 예/아니오도 1/0을 사용할 수 있습니다. 픽셀 값은 특정 값인 단위 픽셀입니다.

매개변수 값 범위 설명

| AlwaysLowered | 예/아니요 | 지정된 창이 모든 창 뒤에 숨겨집니다

AlwaysRaised | 예/아니요 | 지정된 창이 모든 창 위에 일시 중지됩니다
종속됨 | 예/아니요 | 상위 창과 동시에 닫힐지 여부
디렉터리 | 예/아니요 | Nav2 및 3의 디렉터리 표시줄 표시 여부
높이 | 픽셀 값 | 창 높이
단축키 | 예/아니요 | 메뉴 표시줄이 없는 창에서 안전한 종료 단축키 설정
innerHeight | 창에 있는 문서의 픽셀 높이
innerWidth | 창에 있는 문서의 픽셀 너비
위치 | 예/아니요 | 위치 표시줄 표시 여부
메뉴바 | 예/아니요 | 메뉴바 표시 여부
외부 높이 | 픽셀 값 | 창의 픽셀 높이 설정(장식 테두리 포함)
externalWidth | 픽셀 값 | 창의 픽셀 너비 설정(장식 테두리 포함)
크기 조정 가능 | 예/아니요 | 창 크기 조정 가능 여부
screenX | 픽셀 값 | 화면 왼쪽 가장자리로부터의 창 길이(픽셀)
screenY | 픽셀 값 | 화면 위쪽 테두리로부터의 창 길이(픽셀)
스크롤바 | 예/아니요 | 창에 스크롤 막대가 있을 수 있는지 여부
제목 표시줄 | 예/아니요 | 창 제목 표시줄 표시 여부
도구 모음 | 예/아니요 | 창 도구 모음 표시 여부
너비 | 픽셀 값 | 창의 픽셀 너비
z-look | 예/아니요 | 창이 활성화된 후 다른 창 위에 떠 있는지 여부

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 콘텐츠를 표시하는 모덜리스 대화 상자를 만드는 데 사용됩니다.

사용방법:

参数说明：

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页面：

<script>
var obj = new Object();
obj.name="jb51";
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.jb51.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，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

在和间加入

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()
 }
}

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