【1. Ordinary pop-up window】
In fact, the code is very simple:
<SCRIPT LANGUAGE=javascript>
<!--
window.open ('page.html')
-->
</SCRIPT>
Because this is a piece of javascripts code, they should be placed between the <SCRIPT LANGUAGE=javascript> tag and </script>. <!-- and --> are effective for some older browsers. In these old browsers, the code in the tag will not be displayed as text. Develop this good habit.
window.open ('page.html') is used to control the pop-up of a new window page.html. If page.html is not in the same path as the main window, the path should be stated in front, the absolute path ([url]http:// )[/url] and relative paths (../) are both acceptable.
You can use either single quotes or double quotes, just don't mix them.
This piece of code can be added anywhere in the HTML, between <head> and </head>, or between <body> and </body>. The earlier the code is, the sooner it will be executed, especially if the page code is long and you want the page to pop up earlier. Just put it as far forward as possible.
[2. Pop-up window after setting]
Let’s talk about the settings of pop-up windows. Just add a little more to the code above. Let's customize the appearance, size, and pop-up position of this pop-up window to suit the specific conditions 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 in one line
-->
</SCRIPT>
Parameter explanation:
<SCRIPT LANGUAGE=javascript> js script starts;
window.open command to pop up a new window;
'page.html' The file name of the pop-up window;
'newwindow' The name of the pop-up window (not the file name), optional, can be replaced by empty '';
height=100 window height;
width=400 window width;
top=0 pixel value above the window from the screen;
left=0 The pixel value of the window from the left side of the screen;
toolbar=no whether to display the toolbar, yes to display;
menubar, scrollbars represent menu bars and scroll bars.
resizable=no whether to allow the window size to be changed, yes to allow it;
location=no whether to display the address bar, yes to allow;
status=no whether to display the information in the status bar (usually the file has been opened), yes is allowed;
</SCRIPT> js script ends
[3. Use functions to control pop-up windows]
Below 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 in one line
}
//-->
</script>
</head>
<body onload=openwin()>
..arbitrary page content...
</body>
</html>
A function openwin() is defined here, and the function content is to open a window. It serves no purpose until it is called.
How to call it?
Method 1: <body onload=openwin()> A window pops up when the browser reads the page;
Method 2: <body onunload=openwin()> A window pops up when the browser leaves the page;
Method 3: Call with a connection:
<a href=Note: Use "Method 4: Call with a button:
<input type=button onclick=openwin() value=open window>
[4. 2 windows pop up at the same time]
Make slight changes to 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 in one line
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 in one line
}
//-->
</script>
In order to prevent the two pop-up windows from covering each other, use top and left to control the pop-up position so that they do not cover each other. Finally, you can call it using the four methods mentioned above.
Note: The names of the two windows (newwindows and newwindow2) should not be the same, or they should all be empty. OK?
[5. The main window opens the file 1.htm, and the small window page.html pops up at the same time]
The following code is added to the main window <head> area:
<script language=javascript>
<!--
function openwin() {
window.open(page.html,,width=200,height=200)
}
//-->
</script>
Add the <body> area:
Just <a href=1.htm onclick=openwin()>open</a>.
[6. Timing closing control of pop-up windows]
Next, we will perform some control on the pop-up windows, and the effect will be better. If we add a small piece of code to the pop-up page (note that it is added to the HTML of page.html, not the main page, otherwise...), wouldn't it be cooler if it automatically closes after 10 seconds?
First, add the following code to the <head> area of the page.html file:
<script language=javascript>
function closeit() {
setTimeout(self.close(),10000) //Milliseconds
}
</script>
Then, use the sentence <body onload=closeit()> to replace the original <BODY> sentence in page.html. (Don’t forget to write this sentence! The function of this sentence is to call the code to close the window, and then close the window automatically after 10 seconds.)
[7. Add a close button to the pop-up window]
<FORM>
<INPUT TYPE='BUTTON' value='Close' onClick='window.close()'>
</FORM>
Haha, it’s even more perfect now!
[8. Pop-up windows included - two windows on one page]
The above examples all contain two windows, one is the main window and the other is a small pop-up window.
Through the following example, you can complete the above effect in one page.
<html>
<head>
<SCRIPT LANGUAGE=javascript>
function openwin()
{
OpenWindow=window.open(, newwin, height=250, width=250,toolbar=no,scrollbars=+scroll+,menubar=no);
//Write in one line
OpenWindow.document.write(<TITLE>Example</TITLE>)
OpenWindow.document.write(<BODY BGCOLOR=OpenWindow.document.write(<h1>Hello!</h1>)
OpenWindow.document.write(New window opened!)
OpenWindow.document.write(</BODY>)
OpenWindow.document.write(</HTML>)
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href=<input type=button onclick=openwin() value=Open window>
</body>
</html>
Look at the code in OpenWindow.document.write(). Isn’t it standard HTML? Just write more lines according to the format. Be sure to note that an error will occur if there is one more label or one less label. Remember to end it with OpenWindow.document.close().
[9. Ultimate application--Cookie control of pop-up windows]
Recall that although the above pop-up window is cool, it has a little problem (you must not have noticed it if you are immersed in joy?) For example, if you put the above script in In a page that needs to be passed frequently (such as the homepage), the window will pop up every time the page is refreshed. Isn't it very annoying? :-(
Is there any solution? Yes! ;-) Follow me.
We can use cookies to control it.
First, add the following code to the <HEAD> area of the main page HTML:
<script>
function openwin(){
window.open(page.html,,width=200,height=200)
}
function get_cookie(Name) {
var search = Name + =
var returnvalue = ;
if (documents.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(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
documents.cookie=popped=yes
}
}
</script>
Then, replace the original <BODY> sentence in the main page with <body onload=loadpopup()> (note that it is not openwin but loadpop!). You can try refreshing the page or re-entering the page, and the window will never pop up again. True Pop-Only-Once!
At this point, the production and application skills of pop-up windows are basically completed. I am also exhausted. I have said so much in one breath. I hope it will be helpful to friends who are making web pages. I am very happy.
It should be noted that it is best to keep the capitalization in JS scripts consistent.
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 that has been F11ized
<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 a favorite link toolbar
<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. Web page 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>
showModalDialog() or showModelessDialog() to call the web dialog box. The difference between showModalDialog() and showModelessDialog() is that the window opened by showModalDialog() (modal window for short) is placed on the parent window and must be closed. to access the parent window (it is recommended to use it as little as possible to avoid offending people); showModelessDialog() (referred to as modeless window), you can access the window opened by the parent window without closing it after opening.
dialogHeight: iHeight sets the height of the dialog window.
dialogWidth: iWidth sets the width of the dialog window.
dialogLeft: iXPos sets the left position of the dialog window relative to the upper left corner of the desktop.
dialogTop: iYPos sets the top position of the dialog window relative to the upper 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 to display context-sensitive help icons in the dialog window. The default value is "yes".
resizable: {yes | no | 1 | 0} Specifies whether the dialog window is resizable. The default value is "no".
status: {yes | no | 1 | 0} Specifies whether the dialog window displays a status bar. The default value is "yes" for modeless dialog windows and "no" for modal dialog windows.
Web page classic code
1. The right mouse button will be completely blocked and there will be no right-click menu.
<body oncontextmenu=window.event.returnvalue=false>
can also be used in the Table frame in web pages
<table border oncontextmenu=return(false)><td>no</table>
2. Deselect and prevent copying
<body onselectstart=return false>
3. No pasting allowed
<body onpaste=return false>
4. Prevent copying
<body oncopy=return false; oncut=return false;>
5. Change the IE address bar to your own icon
<link rel=Shortcut Icon href=favicon.ico>
Description: About the production of favicon.ico file. You can first create a picture in FW, a small icon for your own site. Then change the file attributes to *.ico in ACD see, and then transfer the *.ICO file you made to your server directory. Then you can use the above code to achieve it. When others log in to your site, in the address bar Use your custom icon.
6. Your icon can be displayed in favorites
<link rel=Bookmark href=favicon.ico>
Instructions: The production method is the same as above. It's just that the display method is different. This is the personalized icon displayed when others bookmark your web address.
7. Close the input method
<input style=ime-mode:disabled>
Explanation: This code is used when submitting the form. That is, other input method modes cannot be used when entering data.
8. Always carry a framework
<script language=javascript><!--
if (window == top)top.location.href = frames.htm;// --></script>
Explanation: frames.htm is your web page. This is also a way to protect the page.
9. Prevent being framed
<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
10. Web pages will not be saved as
<noscript><iframe src=*.html></iframe></noscript>
Note: <noscirpt> has a wide range of uses, one of which is to invalidate JS ads.
11. Check source files
<input type=button value=View web page source code
onclick=window.location = 'view-source:'+ target=_blank>[url]http://bbs.055.cn/test.htm[/url]';>
12.COOKIE script record is very useful
function get_cookie(Name) {
var search = Name + =
var returnvalue = ;
if (documents.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 (documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
documents.cookie=popped=yes
}
}
Note: The above is JS code, please add the start and end characters yourself
13. Use of inner frame <IFRAME>
The usage format of Iframe tag is:
<iframe src=URL width=x height=x scrolling=[OPTION] frameborder=x
name=main></iframe>
src: The path of the file, which can be an HTML file, text, ASP, etc.
width, height: the width and height of the internal frame area;
scrolling: When the specified HTML file of SRC is not displayed in the specified area, the scrolling option, if set to NO, the scroll bar will not appear; if it is Auto: the scroll bar will automatically appear; if it is Yes, it will be displayed; FrameBorder: The width of the area border. In order to blend the "inner frame" with adjacent content, it is often set to 0.
name: The name of the framework, used for identification.
For example: When you want to use the parent frame to control the internal frame, you can use: target=frame name to control.
Example: <iframe name=mm src=http://bbs.055.cn;; width=100% height=100% marginwidth=0 marginheight= ... ot; frameborder=0 scrolling=no></iframe>
14 .Add the following code to automatically jump to <head>…</head> in the source code:
<meta http-equiv=refreshcontent=3;URL=http://bbs.055.cn; charset=gb2312>
Explanation: content=3 means refreshing to the URL in 3 seconds
15. How to change the mouse shape of a link? Just add this code to the link, or you can write it in CSS as above
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 link 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=Full Screen onClick=window.open(document.location, 'big', 'fullscreen=yes')>
</div>
</form>
Put it in the <body> area.
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,scrollbars=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-generation time==>Set as homepage</a>
18. Here is the code for adding 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. The following code for flash image effects is added to the <head> area
<SCRIPT language=javascript>
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>
The following code is added to the <body> area
<img src=/u/info_img/2009-06/08/logo.gif;; style=filte ... nbsp;onMouseOver=makevisible(this,0) onMouseOut=makevisible(this,1) width=63 height=56 > //Please change the image address 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></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. Background image scroll
<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;}
varScrollTimer = window.setInterval(scrollBG(410), 20)
</script>
22.Web pages will not be cached
HTMl pages
<META HTTP-EQUIV=pragma CONTENT=no-cache>
<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 webpageResponse.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = no-cache
PHP web page
header(Expires: Mon, 26 Jul 1997 05:00:00 GMT;
header(Cache-Control: no-cache, must-revalidate;
header(Pragma: no-cache;
23.
<%
'Define some constants for database connection
Const adOpenForwardOnly = 0 'The cursor only browses records forward and does not support paging, Recordset, BookMark
Const adOpenKeyset = 1 'Keyset cursor, modifications made by other users to records will be reflected in the records set, but records added or deleted by other users will not be reflected in the records set. Support paging, Recordset, BookMark
Const adOpenDynamic = 2 'Dynamic cursors have the most powerful functions, but also consume the most resources. Modifications made by users to records, adding or deleting records will be reflected in the record set. Supports full-featured browsing (not supported by ACCESS).
Const adOpenStatic = 3 'Static cursor is just a snapshot of the data. Modifications made by the user to records, adding or deleting records will not be reflected in the record set. Supports moving forward or backward
Const adLockReadOnly = 1 'Lock type, default, read-only, no modifications can be made
Const adLockPessimistic = 2 'Lock the record immediately when editing, the safest way
Const adLockOptimistic = 3 'The recordset is locked only when the Update method is called, and other previous operations can still change, insert, and delete the current record.
Const adLockBatchOptimistic = 4 'Records are not locked when editing, and changes, insertions and deletions are done in batch mode
Const adCmdText = &H0001
Const adCmdTable = &H0002
%>
24. Minimize, maximize and close windows
<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=minimize onclick=hh1.Click()>
<input type=button value=maximize onclick=hh2.Click()>
<input type=button value=Close onclick=hh3.Click()>
Note: This example is suitable for IE
25. Determine the source of the previous page
asp page:
request.servervariables(HTTP_REFERER
javascript:
document.referrer
26. The cursor is stopped at the end of the text in the text box
<script language=javascript>
functioncc()
{
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()>
Description: Suitable for form data submission