Detailed explanation of window.open usage examples in JavaScript

Detailed explanation of window.open usage examples in JavaScript_javascript skills

WBOY

Release： 2016-05-16 16:04:06

Original

1305 people have browsed it

This article analyzes the usage of window.open in JavaScript in more detail. Share it with everyone for your reference. The details are as follows:

Copy code The code is as follows:

Parameter explanation:

js script starts;

window.open command to pop up a new window;
'page.html' 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 pixel value of the window from the left side of the screen;
toolbar=no whether to display the toolbar, yes means display;
menubar, scrollbars represent menu bars and scroll bars.
resizable=no Whether to allow changing the window size, yes means it is allowed;
location=no whether to display the address bar, yes is allowed;
status=no whether to display the information in the status bar (usually the file has been opened), yes is allowed;

1. 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") //写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
...任意的页面内容...
/body>
</html>

Copy after login

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: A pop-up window appears when the browser reads the page;

Method 2: Pop-up window when the browser leaves the page;

Method 3: Call with a connection: open a window Note: The "#" used is a virtual connection.

Method 4: Call with a button:

2. Close the pop-up window regularly (some websites will display n seconds to go to the page before registration after successful registration, or jump by themselves)

Next, we will perform some controls on the pop-up window, 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 area of the page.html file:

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

Copy after login

Then, use this sentence to replace the original 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 the window will be closed automatically after 10 seconds.

3. Only pop up the window once (cookie control)

Recall that although the above pop-up window is cool, there is a slight problem. For example, if you put the above script in a page that needs to be passed frequently (such as the homepage),

So every time you refresh this page, the window will pop up. Isn't it very annoying? Is there any solution?

We use cookies to control this.

First, add the following code to the HTML area 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>

Copy after login

Then, replace the original

in the main page with (note not openwin but loadpop!)

This sentence will do. You can try refreshing the page or re-entering the page, and the window will never pop up again.

I hope this article will be helpful to everyone’s JavaScript programming design.