JavaScript pop-up window method summary, javascript pop-up window

JavaScript pop-up window method summary, javascript pop-up window

The examples in this article summarize common JavaScript pop-up window methods for your reference and hope to help you. The detailed method is as follows:

1. No prompt to refresh the webpage:

Have you found that when refreshing some webpages, a prompt window will pop up and click "OK" to refresh the page.
Some pages do not prompt. If the prompt window is not displayed, the page is refreshed directly.
If the page does not have a form,
The prompt window is not displayed.
If the page has a form,
A) <form method = "post"...>
A prompt window will pop up.
B) <form method = "get"...>
No

2. How to refresh the page with javascript:

window.location.reload();

Use window. open () to refresh the parent window.

window.opener.location.reload()

Window. showDialog

window.dialogArguments.location.reload();

3. javascript pop-up window code:
Window. open () mode:
Window. open () support environment: JavaScript1.0 +/JScript1.0 +/Nav2 +/IE3 +/Opera3 +
Basic Syntax:

window.open(pageURL,name,parameters) 

Where:
PageURL is the sub-window path
Name is the sub-window handle
Parameters is window parameters (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 a row --> </SCRIPT>

After running the script, page.html will be opened in the newwindow of the new form, with a width of 100 and a height of 400. It is 0 pixels away from the screen top, 0 pixels left, no tool bar, no menu bar, no scroll bar, and cannot be adjusted, no address bar, no status bar.
Please compare.

In the preceding example, several common parameters are involved. In addition, there are many other parameters. For details, see section 4.

Parameters
Here, yes/no can also use 1/0; pixel value is a specific value, in pixels.

Parameter | value range | description
|
AlwaysLowered | yes/no | specifies that the window is hidden behind all windows
AlwaysRaised | yes/no | specify that the window is suspended above all windows
Depended | yes/no | whether to close the parent window at the same time
Directories | yes/no | whether the directory bar of Nav2 and 3 is visible
Height | pixel value | window height
Hotkeys | yes/no | set the Security Exit hotkey in the 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 | whether the location bar is visible
Menubar | yes/no | whether the menu bar is visible
OuterHeight | pixel value | set the pixel height of the window (including the decorative border)
OuterWidth | pixel value | set the pixel width of the window (including the decorative border)
Resizable | yes/no | whether the window size can be adjusted
ScreenX | pixel value | pixel length between the window and the left boundary of the screen
ScreenY | pixel value | pixel length between the window and the upper boundary of the screen
Scrollbars | yes/no | whether the window has a scroll bar
Titlebar | yes/no | whether the title bar of the window is visible
Toolbar | yes/no | whether the toolbar of the window is visible
Width | pixel value | pixel Width of the window
Z-look | yes/no | whether the window floated above 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 mode:

Basic Introduction:

ShowModalDialog () (IE 4 + supported)
ShowModelessDialog () (IE 5 + supported)
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.

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. The passed parameter types are not limited, including arrays. The dialog box uses window. dialogArguments to obtain the passed parameters.
SFeatures --
Optional parameter; Type: String. Used to describe the appearance and other information of the dialog box. You can use one or more of the following, separated by semicolons.
1. dialogHeight: the dialog box height. The default unit of dialogHeight and dialogWidth in IE4 is em, while that in IE5 is px. For convenience, when defining the modal mode dialog box, unit with px.
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. The default value is yes, but the height and width can still be specified.
6. help: {yes | no | 1 | 0}: whether to display the help button. The default value is yes.
7. resizable: {yes | no | 1 | 0} [IE5 +]: whether the size can be changed. No by default.
8. status: {yes | no | 1 | 0} [IE5 +]: whether to display the status bar. The default value is yes [Modeless] or no [Modal].
9. scroll: {yes | no | 1 | 0 | on | off}: Specifies whether the scroll bar is displayed in the dialog box. The default value is yes.

The following attributes are used in HTA and are not used in general web pages.

10. dialogHide: {yes | no | 1 | 0 | on | off}: whether the dialog box is hidden when printing or previewing. The default value is no.
11. edge: {sunken | raised}: Specify the border style of the dialog box. The default value is raised.
12. unadorned: {yes | no | 1 | 0 | on | off}: no by default.

Parameter transfer:

(1). vArguments is used to pass Parameters in the dialog box. The type is not limited. For string types, the maximum value 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. dialogArgumentsalert ("the parameter you passed is:" + obj. name) </script>

(2) You can use window. returnValue to return information to the window that opens the dialog box. 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 that the second parameter here is window

4. The mode window data is not refreshed (cached)

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, a new window is displayed:

◎ _ Blank: Open the linked file in the new browser window.

◎ _ Parent: load the linked file into the parent frame set or parent window containing the linked framework. If the frame containing the link is not nested, load the link file in the full screen window of the browser, just like the _ self parameter.

◎ _ Self: Open the linked document in the same framework or window. This parameter is the default value and is not required.

◎ _ Top: Open the linked document in the current browser window and delete all frameworks.

Add <a href00000000a.html "target =" _ blank "/> between

6. There is no prompt to close the page:

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

If you are interested, you can debug the above methods and I believe it will bring you some inspiration and help.

How does javascript implement the pop-up window?

It is impossible not to intercept. All new windows opened automatically by the program will be blocked. Only when your new window is opened by the user to activate a program,

The function can be used to disable any window that is automatically opened by JavaScript. Otherwise, the browser will either block or ignore it directly. The window, open (), and window will be used to open the window. cloas (); you need to use the browser bom to locate the new window. You can add relevant parameters to open. It is cumbersome to search for parameters online.

Javascript pop-up window

A set of common pop-up window usage

The following code sets common pop-up window usage.

1. The most basic pop-up window code

<Script language = "javascript">
<! --
Window. open ('page.html ')
-->
</SCRIPT>

The code is placed between the <script language = "javascript"> tag and </script>.

<! -- And --> are used for browsers with lower versions.
Window. open ('page.html ') is used to control the pop-up window page.html. If page.html is not in the same path as the main window, the path, absolute path (http: //), and relative path (../) should be specified before. You can use single quotes and double quotes, but do not mix them.

This piece of code can be added to any location of HTML, either between
2. After setting, the pop-up window is displayed.

Customize the appearance, size, and position of the pop-up window to adapt to the specific situation of the page.

<Script language = "javascript">
<! --
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 a row
-->
</SCRIPT>

Parameter description:

<Script language = "javascript"> the js SCRIPT starts;
Window. open command to pop up a new window;
'Page.html 'name of the pop-up window;
'Newwindow' indicates the name of the pop-up window (not the file name). It is optional and can be replaced by null;
Height = 100 window height;
Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = no indicates whether to display the toolbar. yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = no: whether to change the window size. yes: yes;
Location = no indicates whether the address bar is displayed. yes indicates yes;
Status = no whether to display the information in the status bar (usually the file has been opened), yes is allowed;
</SCRIPT>
End of js script

3. Function Control pop-up window

Complete code demonstration

<Html>
<Head>
<Script LANGUAGE = "javascript">
<! --
Function openwin () {window... remaining full text>