Of Stack

JavaScript window.open usage examples

  • 2020-05-30 19:23:00
  • OfStack

In this paper, the usage of window.open in JavaScript is analyzed in detail. Share with you for your reference. The details are as follows: 

<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') // written 1 line 

</script>

Parameter explanation:

The js script starts;

window. open command to pop up a new window;
The file name of the 'page. html' pop-up window;
The name of the 'newwindow' pop-up window (not the file name) is optional and can be replaced by an empty ';
height=100 window height;
width=400 window width;
top=0 window distance from the pixel value at the top of the screen;
left=0 the pixel value of the window to the left of the screen;
Whether toolbar=no displays the toolbar, yes displays;
menubar, scrollbars stands for menu bar and scrollbar.
Whether resizable=no is allowed to change the window size, yes is allowed;
Whether location=no displays the address bar, yes is allowed;
Whether status=no displays the information in the status bar (usually the file has been opened), yes is allowed;

1. Use functions to control pop-up Windows

Here 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") // written 1 line 
}
//-->
</script>
</head>
<body onload="openwin()">
... Arbitrary page content ...
/body>
</html>

Here we define a function openwin(), which opens a window. It has no purpose until it is invoked. How do you call it?

Method 1: a pop-up window appears when the browser reads the page;

Method 2: a pop-up window appears when the browser leaves the page;

Method 3: call with 1 connection: open 1 window note: the "#" used is a virtual connection.

Method 4: call with 1 button:

2. Regularly close the popup window (some websites will display n to the page before registration after successful registration, or jump to it by themselves)

Now let's do a little more control over the popup window, and the result will be even better.

If we add a small piece of code to the popup page (note HTML in 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 section of the page.html file: 


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

Then, replace the original page sentence with this one.

Don't forget to write this sentence! The function of this sentence is to call the code that closes the window and close the window itself after 10 seconds.

3. Pop-up window only once (controlled by cookie)

Recall that the above popup window is cool, but it has a little glitch. For example, if you put the above script on a page that needs to be passed frequently (such as the home page),

So every time you refresh this page, the window will pop up once, isn't that annoying? Is there a solution?

We use cookie to control 1.

First, add the following code to the HTML section of the main page: 


<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, use (note not openwin, but loadpop!) Replace the original on the main page

This one sentence will do. You can try to refresh the page once or re-enter the page, and the window will never pop up again.

I hope this article is helpful to your javascript programming.

Related articles: