JavaScript pop up method summary

  • 2020-03-30 03:40:58
  • OfStack

1. Refresh the page without prompt:

Have you noticed that some web pages, when the refresh, will pop up a prompt window, click "ok" will refresh.
And some pages will not prompt, do not pop up prompt window, directly refresh.
If the page doesn't 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"... >  
    It doesn't pop up    

2. Javascript method to refresh the page:


window.location.reload();

Refresh the parent window with the popup window that pops up using window.open()


window.opener.location.reload()

Use the mode window that pops up in window.showdialog


window.dialogArguments.location.reload();

Among them:
PageURL is the path of the child window
Name is the handle to the child window
Parameters are window parameters (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') 
//Written in a row
--> 
</SCRIPT>

After the script runs, page.html will open in a new form, newwindow, 100 wide, 400 high, 0 pixels from the top of the screen, 0 pixels to the left of the screen, no toolbar, no menu bar, no scroll bar, no resizable, no address bar, no stateless bar.
Please control.

The parameters mentioned in the above example are a few commonly used parameters, and there are many other parameters besides, please see 4.


Various parameters
Where yes/no can also use 1/0; Pixel value is a specific value, unit pixel.

Parameter | value range |
| |
AlwaysLowered | yes/no | specifies that the window is hidden behind all Windows
AlwaysRaised | yes/no | specifies that the window is suspended over all Windows
Whether depended | yes/no | and parent window closed at the same time
Directories | yes/no | Nav2 and 3
Pixel value | window height
Hotkeys | yes/no | set a safe exit hotkey in a window without a menu bar
The pixel height of the document in the innerHeight | pixel value | window
The pixel width of a document in the innerWidth | pixel value | window
Is the location | yes/no | location column visible
Menubar | yes/no | menubar is visible
OuterHeight | pixel value | sets the pixel height of the window (including the decorative border)
OuterWidth | pixel value | sets the pixel width of the window (including the decorative border)
Resizable | yes/no | window size is adjustable
The pixel length of the screenX | pixel value | window from the left edge of the screen
The pixel length of the screenY | pixel value | window from the border on the screen
Scrollbars | yes/no | window can have a scrollbar
Titlebar | yes/no | window titlebar is visible
Toolbar | yes/no | window toolbar is visible
Width | pixel value | window pixel Width
Z-look | yes/no | window is floating on top of other Windows after being 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 way:

Basic introduction:

Usage:


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

Parameter description:

SURL -
Required parameter, type: string. Specifies 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. There is no limit to the types of arguments you can pass, including arrays, etc. The dialog box gets the arguments passed in through window.dialogarguments.
SFeatures -
Optional parameter, type: string. To describe the appearance of the dialog box, you can use one or more of the following, using the semicolon ";" Separated.
DialogHeight: dialogHeight, not less than 100px, the default unit of dialogHeight and dialogWidth in IE4 is em, and in IE5 is px, in order to facilitate the definition of modal mode dialog, use px as the unit.
2. DialogWidth:
DialogLeft: the distance to the left of the screen.
DialogTop: the distance from the screen.
5. Center: {yes | no | 1 | 0} : if the window is centered, the default is yes, but the height and width can still be specified.
6. Help: {yes | no | 1 | 0} : whether to display the help button, default yes.
7. Resizable: {yes | no | 1 | 0} [IE5+] : can the size be changed? No by default.
8. Status: {yes | no | 1 | 0} [IE5+] : whether to display status bar. The default is yes[Modeless] or no[Modal].
9. Scroll :{yes | no | 1 | 0 | on | off} : The default is yes.

The following properties are used in HTA and are not used in normal web pages.

DialogHide :{yes | no | 1 | 0 | on | off} : whether the dialog box is hidden when printing or printing preview. The 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} : the default value is no.

Parameter transfer:

(1). To pass arguments to the dialog box, vArguments is passed. Type is unrestricted, with a maximum of 4096 characters for string types. Objects can also be passed, for example:
-------------------------------
The 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.dialogArguments
alert(" The parameters you passed are: " + obj.name)
</script>

(2) information can be returned to the window that opens the dialog box through window.returnvalue, of course, it can also be an object. Such as:

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");
 }

Notice the second parameter here, window

4. Data in the mode window does not refresh (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:

Thecountry. _blank, opens the link file in the new browser window.

Thecountry. _parent, loads the linked file into the parent framesset or parent window that contains the linked frame. If the frame containing the link is not nested, the file for the link is loaded in the browser's full-screen window, just like the _self parameter.

Thecountry. _self, opens the linked document in the same frame or window. This parameter is the default and is not usually specified.

Thecountry. _top, which opens the linked document in the current entire browser window and therefore removes all frames.

In < / head> And < Body> Join between < A href = "a.h HTML" target = "_blank" / >

6. Ways to close the page without prompting:


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

Interested readers can debug the above method, I believe it will give you some inspiration and help.


Related articles: