All parameters of window.open of in js are parsed in detail

2020-03-30 01:18:11
OfStack

[1, the most basic pop-up window code]


 <SCRIPT LANGUAGE="javascript">  
<!--  
window.open ('page.html')  
-->  
</SCRIPT>

Since this is a javascripts code, they should be placed in the SCRIPT LANGUAGE = "javascript" > The labels and < / script> In between. < ! - and - > This works for some browsers with lower versions, where the code in the tag is not displayed as text. To form this good habit. Window.open ('page.html') is used to control the popup of new window page.html, if page.html is not in the same path with the main window, the previous should specify the path, the absolute path (http://) and the relative path (.. /) are available. Use both single and double quotes, just don't mix them. This code can be added anywhere in the HTML. Head> And < / head> Between yes, < Body> Between < / body> It is also possible to execute as early as possible, especially if the page code is long and you want the page to pop up earlier.

[2. Pop-up window after setting]

Let's talk more about the pop-up Settings. Just add a little more to the code above. Let's customize the appearance, size, and location of the popup window to fit 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=n o, status=no') //This sentence should be written in one line
-->  
</SCRIPT>

Parameter explanation:

< SCRIPT LANGUAGE = "javascript" > Js script starts;
Window.open the command to pop up a new window;
'page.html' popup window filename;
The name of the 'newwindow' pop-up window (not the file name).
Height =100 window height;
Width =400 window width;
Top =0 window distance from the pixel value at the top of the screen;
Left =0 window distance to the left of the screen pixel value;
Toolbar =no displays toolbar, yes displays toolbar;
Menubar, scrollbars stand for menubar and scrollbar.
Resizable =no is it allowed to change the window size, yes is allowed;
Location =no whether the address bar is displayed, yes is allowed;
Status =no displays the information in the status bar (usually the file is open), yes is allowed;
< / SCRIPT> End of js script

[3, use function to control pop-up window]

Here is the 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") //Written in a row
}  
//-->  
</script>  
</head>  
<body onload="openwin()">  
 Arbitrary page content ...  
</body>  
</html>

Here we define a function called openwin() that opens a window. It has no use until it is invoked. How do I call it?
Method 1: < The 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 = "#" onclick = "openwin ()" > Open a window. / a>
Note: the "#" used is a virtual join.
Method 4: call: with a button;
< Input type="button" onclick="openwin()" value=" open window ">

[4. Two Windows pop up at the same time]

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=n o, status=no")//Write it in one line & NBSP;
window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//Write it in one line & NBSP;
}  
//-->  
</script>

To avoid overwriting the two pop-ups, use top and left to control the pop-ups without overwriting each other. Finally, the four methods mentioned above can be invoked.
Note: the names of the two Windows (newwindows and newwindow2) are not the same, or they are all empty.

5. The main window opens the file 1.htm, and a small window page.html pops up at the same time.

Add the main window < Head> Area:


<script language="javascript">  
<!--  
function openwin() {  
window.open("page.html","","width=200,height=200")  
}  
//-->  
</script>

Join < Body> Area:
< A href = "1. HTM" onclick = "openwin ()" > Open< / a> Can.

[6. Control of pop-up window closing on time]

Now let's do a little more control over the popup window, and it's even better. If we add a little bit of code to the popup page (note that it's in the HTML of page.html, not the main page, otherwise...) Wouldn't it be cool to have it turn off after 10 seconds?
First, add the following code to the page.html file < Head> Area:


<script language="JavaScript">  
function closeit()  
{  
setTimeout("self.close()",10000) //Ms  
}  
</script>

And then, we can use < The body onload = "closeit ()" > This sentence replaces the original page.html. BODY> This sentence will do. Don't forget to write this sentence! This sentence calls the code that closes the window and closes the window itself after 10 seconds.

[7. Add a close button to the pop-up window]

< FORM>
< INPUT TYPE='BUTTON' VALUE=' close 'onClick='window.close()'>
< / FORM>
Ha ha, now more perfect!

[8. Popup window contained within - two Windows for one page]

Each of the above examples contains two Windows, one a main window and the other a small window that pops up. With 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 it in one line & NBSP;
OpenWindow.document.write("<TITLE> example </TITLE>")  
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")  
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="#" onclick="openwin()"> Open a window </a>  
<input type="button" onclick="openwin()" value=" Open the window ">  
</body>  
</html>

See OpenWindow. Document. The write () inside of the code is not standard HTML? Just write more lines in the format. Be sure to note that one more tag or one less tag will result in an error. Remember to use OpenWindow. Document. The close () the end.

[9. Ultimate application -- Cookie control of pop-up window]

Recall that the pop-ups above were cool, but there was something wrong with them. For example, if you put the above script on a page that needs to pass by frequently (such as the home page), then every time you refresh the page, the window will pop up once, isn't that annoying? : - (
Is there a solution? Yes! ; -) Follow me. We can use cookie to control it.

First, add the following code to the main page HTML < HEAD> Area:


<script>  
function openwin(){  
window.open("page.html","","width=200,height=200")  
}  
function get_cookie(Name) {  
var search = Name + "="  
var returnvalue = "";  
if (document.cookie.length > 0) {  
offset = document.cookie.indexOf(search)  
if (offset != -1) {  
offset += search.length  
end = document.cookie.indexOf(";", offset);  
if (end == -1)  
end = document.cookie.length;  
returnvalue=unescape(document.cookie.substring(offset, end))  
}  
}  
return returnvalue;  
} 　 
function loadpopup(){  
if (get_cookie('popped')==''){  
openwin()  
document.cookie="popped=yes"  
}  
}  
</script>

And then, with < The body onload = "loadpopup ()" > (note not openwin but loadpop!) Replace the original main page < BODY> This sentence will do. You can try refreshing the page or re-entering it, and the window will never pop up again. Real pop-only Once!