Home > Developer > JavaScript
. You can use single quotes and double quotes, but do not mix them.
[2. After setting, the pop-up window is displayed]
<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. 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]
The following is a complete code.
<Html>
<Head>
<Script LANGUAGE = javascript>
<! --
Function openwin (){
Window. open (page.html, newwindow, height = 100, width = 400, toolbar = no, menubar = no,
Scrollbars = no, resizable = no, location = no, status = no)
// Write a row
}
// -->
</Script>
</Head>
<Body onload = openwin ()>
.....
</Body>
</Html>
A function openwin () is defined here. How can this function be called?
Method 1: The <body onload = openwin ()> window is displayed when the browser reads the page;
Method 2: <body onunload = openwin ()> A window pops up when the browser leaves the page;
Method 3: Call by link: Method 4: Call by button:
4. Two windows are displayed at the same time]
Slightly modify the source code:
<Script LANGUAGE = javascript>
<! --
Function openwin (){
Window. open (page.html, newwindow, height = 100, width = 100, top = 0, left = 0, toolbar = no,
Menubar = no, scrollbars = no, resizable = no, location = no, status = no)
// Write a row
Window. open (page2.html, newwindow2, height = 100, width = 100, top = 100, left = 100, toolbar = no,
Menubar = no, scrollbars = no, resizable = no, location = no, status = no)
// Write a row
}
// -->
</Script>
To avoid overwriting the two pop-up windows, use top and left to control the position of the pop-up window. Finally, I used the above statement.
.
Note: The names of the two windows (newwindows and newwindow2) must not be the same, or they are all empty.
Open the file 1.htmin the main window, and pop up the window page.html at the same time]
Add the following code to the
<Script language = javascript>
<! --
Function openwin (){
Required bytes open(page.html, width = 200, height = 200)
}
// -->
</Script>
Add to the <body> area:
<A href00001.htm onclick = openwin ()> open </a>.
[6. timed close control for the pop-up window]
Next we will make some control over the pop-up window, and the effect will be better. If we add a short piece of code to the pop-up page (
The lifecycle is added to the HTML of page.html, not the homepage. Otherwise, it will be cool to make it automatically close after 10 seconds?
First, add the following code to the <Script language = javascript>
Function closeit (){
SetTimeout (self. close (), 10000) // millisecond
}
</Script>
Then, use the <body onload = closeit ()> statement to replace the original <BODY> sentence in page.html. (This
Never forget to write a sentence! The function of this statement is to call the code for closing the window. The window will be closed in 10 seconds .)
7. Add a close button in the pop-up window]
<FORM>
<Input type = 'button 'value = 'close 'onclick = 'window. close ()'>
</FORM>
[8. included pop-up window-one page and two windows]
Through the example below, you can complete the above effect on a page.
<Html>
<Head>
<Script language = javascript>
Function openwin ()
{
OpenWindow = window. open (, newwin, height = 250,
Width = 250, toolbar = no, scrollbars = + scroll +, menubar = no );
// Write a row
Openmediaworkflow Doc ument. write (<TITLE> example </TITLE>)
Openmediaworkflow Doc ument. write (<BODY bgcolor=openmediaworkflow Doc ument. write (Openmediaworkflow Doc ument. write (New window opened !)
Openmediaworkflow Doc ument. write (</BODY>)
Openmediaworkflow Doc ument. write (</HTML>)
Openmediaworkflow Doc ument. close ()
}
</SCRIPT>
</Head>
<Body>
<A href = <input type = button onclick = openwin () value = open window>
</Body>
</Html>
Check if the code in openmediaworkflow Doc ument. write () is not standard HTML? As long as more rows are written in the format, that is
Yes. An error occurs when you add one or more labels. Remember to end with opentracing upload Doc ument. close.
[9. Cookie control in the pop-up window]
Recall that the pop-up window above is cool, but it is slightly faulty. For example, if you place the above script in a scenario that requires frequent
If you refresh this page every time, the window will pop up once, isn't it annoying? :-(
Solution:
We can use cookies to control it. First, add the following code to the <HEAD> area of the HTML homepage:
<Script>
Function openwin (){
Required bytes open(page.html, width = 200, height = 200)
}
Function get_cookie (Name ){
Var search = Name + =
Var returnvalue =;
If (events. cookie. length> 0 ){
Offset = documents. cookie. indexOf (search)
If (offset! =-1 ){
Offset + = search. length
End = documents. cookie. indexOf (;, offset );
If (end =-1)
End = documents. cookie. length;
Returnvalue = unescape (events. cookie. substring (offset, end ))
}
}
Return returnvalue;
}
Function loadpopup (){
If (get_cookie ('popped') = ''){
Openwin ()
Documents. cookie = popped = yes
}
}
</Script>
Then, use <body onload = loadpopup ()> (not openwin, but loadpop !) Replace original on the home page
<BODY> This sentence is enough. You can refresh the page or enter the page again, and the window will no longer pop up. Real
Pop-Only-Once!
The creation and application skills of the pop-up window are basically completed.
1. Pop up a full screen window
<Html>
<Body onload = window. open ('HTTP: // www.pconline.com.cn ', 'example01', 'fullscreen');>;
<B> [url] www.e3i5.com [/url] </B>
</Body>
</Html>
2. Pop up a window after F11
<Html>
<Body onload = window. open ('HTTP: // www.pconline.com.cn ', 'example02', 'channelmode');>;
<B> [url] www.e3i5.com [/url] </B>
</Body>
</Html>
3. Pop up a window with the toolbar of the favorite Link
<Html>
<Body onload = window. open
('HTTP: // www.pconline.com.cn ', 'example03', 'width = 400, height = 300, directories');>
<B> [url] www.e3i5.com [/url] </B>
</Body>
</Html>
4. webpage dialog box
<Html>
<Script language = javascript>
<! --
ShowModalDialog
('HTTP: // www.pconline.com.cn ', 'example04', 'dialogwidth: 400px; dialogHeight: 300px;
DialogLeft: 200px; dialogTop: 150px; center: yes; help: yes; resizable: yes; status: yes ')
// -->
</SCRIPT>
<B> [url] www.e3i5.com [/url] </B>
</Body>
</Html>
<Html>
<Script language = javascript>
<! --
ShowModelessDialog
('HTTP: // www.pconline.com.cn ', 'example05', 'dialogwidth: 400px; dialogHeight: 300px;
DialogLeft: 200px; dialogTop: 150px; center: yes; help: yes; resizable: yes; status: yes ')
// -->
</SCRIPT>
<B> target = _ blank> [url] http://www.pconline.com.cn [/url] </B>
</Body>
</Html>
The difference between showModalDialog () and showModelessDialog () Is that showModalDialog () opens the mode window,
ShowModelessDialog () opens the mode-free window.
DialogHeight: the height of the window in the iHeight Setting dialog box.
DialogWidth: iWidth: Set the window width in the dialog box.
DialogLeft: left position in the dialog box relative to the upper left corner of the desktop.
DialogTop: the top position in the window of the iYPos Setting Dialog Box relative to the top left corner of the desktop.
Center: {yes no 1 0} specifies whether to center the dialog box on the desktop. The default value is "yes ".
Help: {yes no 1 0} specifies whether the context-sensitive help icon is displayed in the dialog box. The default value is "yes ".
Resizable: {yes no 1 0} specifies whether the dialog box window size is variable. The default value is "no ".
Status: {yes no 1 0} specifies whether the status bar is displayed in the dialog box. For non-mode dialog box windows, the default value is "yes ";
For the mode dialog box window, the default value is "no ".
Webpage classic code
1. the right-click dialog box is completely blocked, and no shortcut menu is available.
<Body oncontextmenu = window. event. returnvalue = false>
It can also be used in the Table framework of a webpage.
<Table border oncontextmenu = return (false)> <td> no </table>
2. Cancel selection and prevent Replication
<Body onselectstart = return false>
3. Do not paste
<Body onpaste = return false>
4. Prevent Replication
<Body oncopy = return false; oncut = return false;>
5. Replace the IE icon in front of the address bar
<Link rel = Shortcut Icon href = favicon. ico>
Note: The favicon. ico file is created. You can create an image in FW to create a small icon on your own site. Then
ACD see will change the file attribute to *. ico, and then upload the *. ICO file you made to your server directory, then you can use the above generation
When someone else logs on to your site, the address bar uses your custom icon.
6. You can display your icons in the favorites folder.
<Link rel = Bookmark href = favicon. ico>
Note: The production method is the same as above. The display method is different. This is a personalized chart displayed when someone else adds Your webpage address to favorites.
.
7. Disable the Input Method
<Input style = ime-mode: disabled>
Note: This code is used when submitting a table. That is, other input methods cannot be used when data is input.
8. Always carry the framework
<Script language = javascript> <! --
If (window = top) top. location. href = frames.htm; // --> </script>
Note: frames.htm Is Your webpage. This is also a method to protect the webpage.
9. Prevent frame
<Script language = javascript> <! --
If (top. location! = Self. location) top. location = self. location;
// --> </SCRIPT>
10. The webpage cannot be saved
<Noscript> <iframe src = *. html> </iframe> </noscript>
Note: <noscirpt> is widely used, one of which can invalidate JS ads.
11. Check the source file
<Input type = button value = view webpage source code
Onclick = window. location = 'view-source: '+ target = _ blank> [url] http://bbs.055.cn/test.htm
[/Url] ';>
12. COOKIE script records are of great use.
Function get_cookie (Name ){
Var search = Name + =
Var returnvalue =;
If (events. cookie. length> 0 ){
Offset = documents. cookie. indexOf (search)
If (offset! =-1) {// if cookie exists
Offset + = search. length
// Set index of beginning of value
End = documents. cookie. indexOf (;, offset );
// Set index of end of cookie value
If (end =-1)
End = documents. cookie. length;
Returnvalue = unescape (events. cookie. substring (offset, end ))
}
}
Return returnvalue;
}
Function loadpopup (){
If (get_cookie ('popped') = ''){
Openpopup ()
Documents. cookie = popped = yes
}
}
Note: The above is the JS Code. Please add the start and end characters on your own.
13. Use of the internal framework <IFRAME>
The format of the Iframe tag is:
<Iframe src = URL width = x height = x scrolling = [OPTION] frameborder = x
Name = main> </iframe>
Src: file path, which can be either an HTML file or a text file or an ASP file.
Width and height: the width and height of the Internal Frame area;
Scrolling
If Auto is used, the scroll bar is automatically displayed. If Yes, the scroll bar is displayed. FrameBorder: the width of the Area border.
The framework is usually set to 0 when it is integrated with the adjacent content.
Name: Framework name, used for identification.
For example, if you want to use the parent framework to control the internal framework, you can use: target = framework name to control it.
Example: <iframe name = mm src = http://bbs.055.cn; width = 100% height = 100% marginwidth = 0
Marginheight =... ot; frameborder = 0 scrolling = no> </iframe>
14. Automatic jump
In the source code, <Meta http-equiv = refreshcontent = 3; URL = http://bbs.055.cn; charset = gb2312>
Note: content = 3 indicates that the URL is refreshed in 3 seconds.
15. How to change the Mouse shape of a link
You just need to add this code to the link.
Or keep up with the above and write it in CSS.
Style = cursor: hand style = cursor: crosshair
Style = cursor: text style = cursor: wait
Style = cursor: move style = cursor: help
Style = cursor: e-resize
Style = cursor: n-resize
Style = cursor: nw-resize style = cursor: w-resize
Style = cursor: s-resize
Style = cursor: se-resize
Style = cursor: sw-resize
You only need to add the above Code to the connection or the style area of the page to diversify the mouse.
16. Full Screen Display
<Form>
<Div align = center>
<Input type = BUTTON name = FullScreen value = onClick = window. open (document. location,
'Big ', 'fullscreen = yes')>
</Div>
</Form>
Put it in <body>.
17. Set as Homepage
<Script language = javascript>
<! --
Function defaul_home (){
This. home. style. behavior = 'url (# default # homepage) '; this. home. setHomePage ([url]
Http://bbs.055.cn/#/url+';
}
Var focusok = false;
If (navigator. appName = Netscape {
Focusok = true;
}
Vers = navigator. appVersion;
If (navigator. appName = Microsoft Internet Explorer {
Pos = vers. lastIndexOf ('.');
Vers = vers. substring (pos-1, vers. length );
}
Proper_version = parseFloat (vers );
If (proper_version> = 5 ){
Focusok = true;
}
Function launchstock1 (htmlurl ){
Var stock = window. open
(Htmlurl, stock, top = 2, left = 2, toolbar = no, location = no, directories = no, status = no, menubar = no, scro
Llbars = yes,
Resizable = no, width = 700, height = 510;
If (focusok ){
Stock. focus ();
}
Return true;
}
Function launchstock (){
Var stock = window. open
(, Stock, top = 2, left = 2, toolbar = no, location = no, directories = no, status = no, menubar = no, scrollbars =
Yes,
Resizable = no, width = 700, height = 510;
If (focusok ){
Stock. focus ();
}
Return true;
}
// -->
</Script>
<A href = # name = home onClick = defaul_home (); title = e = ==> set as homepage </a>
18. Here is the code to add to favorites
<A href = # onClick = window. external. addFavorite ([url] http://bbs.055.cn [/url] ';. 'dawn accord ')
Target = _ self title = Dawn accord> Add to favorites </a>
19. flash Image Effect
Add the following code to the <SCRIPT language = javascript>
<! --
Function makevisible (cur, which ){
If (which = 0)
Cur. filters. alpha. opacity = 100
Else
Cur. filters. alpha. opacity = 20
}
// -->
</SCRIPT>
Add the following code to the <body> Area
(This, 0) onMouseOut = makevisible (this, 1) width = 63 height = 56> // change the image address by yourself
20. load progress bar
<Table cellspacing = 0 cellpadding = 0 bgcolor = # FFFFFF width = 40% id = P> <tr> <td>
<Table cellspacing = 0 cellpadding = 0 bgcolor = # 0000FF height = 18
Id = Q> <tr> <td> </tr> </table> </td> </tr> </table>
</Center>
<Script language = javascript>
Var R = 0; load ();
Function load () {R = R + 2; Q. style. width = R + %; time = setTimeout (load (), 50 );
If (R> 100) {clearTimeout (time); P. style. width = 0 }}
</Script>
27 full screen
<Script language = javascript>
Window. open ('index. asp ', '', 'fullscreen = 1 ');
</Script>
21. Scroll down the background image
<Body scroll = no background = images/bg.jpg link = #00FF00 alink = # FF0000 vlink = #00FF00
Bgcolor = #000080 topmargin = 8>
<Script language = javascript>
Var backgroundOffset = 0;
Var bgObject = eval ('document. body ');
Function scrollBG (maxSize) {backgroundOffset = backgroundOffset + 1;
If (backgroundOffset> maxSize) backgroundOffset = 0;
BgObject. style. backgroundPosition = 0 + backgroundOffset ;}
Var ScrollTimer = window. setInterval (scrollBG (410), 20)
</Script>
22. The webpage will not be cached
HTMl webpage
& Lt; META HTTP-EQUIV = pragma CONTENT = no-cache & gt;
<META HTTP-EQUIV = Cache-Control CONTENT = no-cache, must-revalidate>
<META HTTP-EQUIV = expires CONTENT = Wed, 26 Feb 1997 08:21:57 GMT>
Or <META HTTP-EQUIV = expires CONTENT = 0>
ASP Web Page
Response. Expires =-1
Response. ExpiresAbsolute = Now ()-1
Response. cachecontrol = no-cache
PHP webpage
Header (Expires: Mon, 26 Jul 1997 05:00:00 GMT;
Header (Cache-Control: no-cache, must-revalidate;
Header (Pragma: no-cache;
23. Minimize, maximize, and close the window
<Object id = hh1 classid = clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<Param name = Command value = Minimize> </object>
<Object id = hh2 classid = clsidDB880A6-D8FF-11CF-9377-00AA003B7A11>
<Param name = Command value = Maximize> </object>
<OBJECT id = hh3 classid = clsid: adb880a6-d8ff-11cf-9377-00aa003b7a11>
<Param name = Command value = Close> </OBJECT>
<Input type = button value = minimized onclick = hh1.Click ()>
<Input type = button value = maximized onclick = hh2.Click ()>
<Input type = button value = Disable onclick = hh3.Click ()>
24. determine the source of the previous page
Asp page:
Request. servervariables (HTTP_REFERER
Java script:
Document. referrer
25. The cursor stops at the end of the text box.
<Script language = javascript>
Function cc ()
{
Var e = event. srcElement;
Var r = e. createTextRange ();
R. moveStart ('character ', e. value. length );
R. collapse (true );
R. select ();
}
</Script>
<Input type = text name = text1 value = 123 onfocus = cc ()>
Several common JavaScript Form Verification scripts:
Only numbers can be entered
<Input onkeyup = "value = value. replace (/[^ \ d]/g ,'')"
Onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text'). replace (/
[^ \ D]/g, '')">
ENTER to move the cursor to the next input box
<Input onkeydown = "if (event. keyCode = 13) event. keyCode = 9"> <br>
Only Chinese
<Input onkeyup = "value = value. replace (/[-~] /G, '')" onkeydown = "if (event. keyCode = 13)
Event. keyCode = 9 "> <br>
Shielded Input Method
<Input style = "ime-mode: disabled" onkeydown = "if (event. keyCode = 13) event. keyCode = 9"> <br>
Only English and numbers can be entered.
<Input onkeyup = "value = value. replace (/[\ W]/g ,'')"
Onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text'). replace (/
[^ \ D]/g ,''))"
Onkeydown = "if (event. keyCode = 13) event. keyCode = 9"> <br>
Display only, cannot modify
<Input readonly value = "display only, cannot be modified">
Prohibit copying and selecting ................
<Script language = "JavaScript" type = "text/JavaScript">
Code for double-clicking the mouse to scroll the screen
Var currentpos, timer;
Function initialize ()
{
Timer = setInterval ("scrollwindow ()", 30 );
}
Function SC ()
{
ClearInterval (timer );
}
Function scrollwindow ()
{
Currentpos = document. body. scrollTop;
Window. scroll (0, ++ currentpos );
If (currentpos! = Document. body. scrollTop)
SC ();
}
Document. onmousedown = SC
Document. ondblclick = initialize
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
