This article summarizes commonly used JavaScript pop-up window methods for your comparison and reference. I hope it will be helpful to you. The detailed method is as follows:
1. Refresh the web page silently:
Have you noticed that when some web pages are refreshed, a prompt window will pop up, and click "OK" to refresh.
Some pages will not be prompted, and the prompt window will be refreshed directly without popping up.
If the page does not have a form,
The prompt window will not pop up
If the page has a form form,
a)<form method="post" ...>
A prompt window will pop up
b)<form method="get" ...>
Will not pop up
2. How to refresh the page in javascript:
window.location.reload();
Use the pop-up window pop-up window to refresh the parent window
window.opener.location.reload()
Mode window popup using window.showDialog
window.dialogArguments.location.reload();
3.javascript popup window code:
window.open() method:
window.open() supports environment: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
Basic syntax:
window.open(pageURL, name, parameters)
in:
pageURL is the child window path
name is the child window handle
parameters are window parameters (each parameters are separated by commas)
Example:
<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') //Write as one line--> </SCRIPT>After the script is run, page.html will be opened in the new form newwindow, with a width of 100, a height of 400, 0 pixels from the top of the screen, 0 pixels from the left of the screen, no toolbar, no menu bar, no scroll bar, no resize, no address bar, and no status bar.
Please compare.
The above examples are several commonly used parameters, and there are many other parameters in addition to this, please see 4.
Various parameters
Among them, yes/no can also be used 1/0; pixel value is the specific value, unit pixel.
Parameters | Value range | Description
| |
alwaysLowered | yes/no | Specified windows are hidden behind all windows
alwaysRaised | yes/no | Specify windows suspended over all windows
depended | yes/no | Whether to close the parent window at the same time
directories | yes/no | Are the directory columns of Nav2 and 3 visible
height | pixel value | window height
hotkeys | yes/no | Set safe exit hotkey in window without menu bar
innerHeight | pixel value | pixel height of the document in the window
innerWidth | pixel value | pixel width of the document in the window
location | yes/no | Is the location bar visible
menubar | yes/no | Is the menu bar visible
outerHeight | pixel value | Set the pixel height of the window (including decorative borders)
outerWidth | pixel value | Set the pixel width of the window (including decorative borders)
resizable | yes/no | Is the window size resizable
screenX | pixel value | The pixel length of the window to the left border of the screen
screenY | pixel value | The pixel length of the window to the upper boundary of the screen
scrollbars | yes/no | Is there a scrollbar available in the window
titlebar | yes/no | Is the window title column visible
toolbar | yes/no | Is the window toolbar visible
Width | pixel value | Pixel width of the window
z-look | yes/no | Whether the window floats on other windows after it is activated
function ShowDialog(url) { var iWidth=300; //Window width var iHeight=200;//Window height 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 method:
Basic introduction:
showModalDialog() (IE 4+ support)
showModelessDialog() (IE 5+ support)
The window.showModalDialog() method is used to create a modal dialog box that displays HTML content.
The window.showModelessDialog() method is used to create a non-modal dialog box that displays HTML content.
How to use:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
Parameter description:
sURL--
Required parameter, type: string. Used to specify the URL of the document to be displayed in the dialog box.
vArguments--
Optional parameter, type: variant. Used to pass parameters to the dialog box. The passed parameter types are not limited, including arrays, etc. The dialog box uses window.dialogArguments to obtain the passed parameters.
sFeatures--
Optional parameter, type: string. Information used to describe the appearance of a dialog box, such as the following information, can be separated by a semicolon ";".
1.dialogHeight: The dialog box height is not less than 100px. The default units of dialogHeight and dialogWidth in IE4 are em, and px in IE5. For the sake of convenience, when defining the dialog box in the modal method, px is used as the unit.
2.dialogWidth: Dialog box width.
3.dialogLeft: The distance from the left of the screen.
4.dialogTop: The distance from the screen.
5.center: {yes | no | 1 | 0 }: Whether the window is centered, defaults to yes, but you can still specify height and width.
6.help: {yes | no | 1 | 0 }: Whether to display the help button, the default is yes.
7.resizable: {yes | no | 1 | 0 } [IE5+]: Whether the size can be changed. Default no.
8.status: {yes | no | 1 | 0 } [IE5+]: Whether to display the status bar. Defaults to yes[Modeless] or no[Modal].
9.scroll:{ yes | no | 1 | 0 | on | off }: Indicates whether the dialog box displays scroll bars. Default is yes.
The following attributes are used in HTA and are generally not used in general web pages.
10.dialogHide:{ yes | no | 1 | 0 | on | off }: Whether the dialog box is hidden when printing or printing preview. Default is no.
11.edge:{ sunken | raised }: Specify the border style of the dialog box. The default is raised.
12.unadorned:{ yes | no | 1 | 0 | on | off }: Default is no.
Parameter passing:
(1). If you want to pass parameters in the dialog box, it is passed through vArguments. There is no restriction on type, for string types, the maximum is 4096 characters. Objects can also be passed, for example:
-------------------------------
parent.htm page:
<script>var obj = new Object();obj.name="jb51";window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");</script>modal.htm page:
<script>var obj = window.dialogArgumentsalet("The parameter you pass is: " + obj.name)</script>(2) You can return information to the window where the dialog box is opened through window.returnValue, and of course it can also be an object. For example:
parent.htm page code:
<script>str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");alert(str);</script>modal.htm<script>window.returnValue="http://www.jb51.com";</script>example:
function ShowDialog(url) { var iWidth=300; //Window width var iHeight=200;//Window height 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"); }Note the second parameter here, window
4. The problem of not refreshing the mode window data (cache)
Add the following statement to the jsp page
<% response.setHeader("Pragma","No-Cache"); response.setHeader("Cache-Control","No-Cache"); response.setDateHeader("Expires", 0);%>5. In the mode window, the link pops up a new window problem:
◎_blank, open the link file in the new browser window.
◎_parent, load the linked file into the parent frame set or parent window containing the link frame. If the framework containing the link is not nested, the linked file is loaded in the browser full screen window, just like the _self parameter.
◎_self, open the linked document in the same frame or window. This parameter is the default value and is usually not specified.
◎_top, opens the linked document in the entire current browser window, thus deleting all frames.
Add <a href="a.html"target="_blank "/> between </head> and <body>
6. How to close the page silently:
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("beforEnd", str); document.all.noTipClose.Click(); } else { window.opener =null; window.close(); } }else{ window.close() }}Interested readers can debug the above methods, which I believe will bring some inspiration and help to everyone.