Home > Web Front-end > JS Tutorial > Detailed analysis of all parameters of window.open() in js_javascript skills

Detailed analysis of all parameters of window.open() in js_javascript skills

WBOY
Release: 2016-05-16 17:04:43
Original
1540 people have browsed it

[1. The most basic pop-up window code]

Copy the code The code is as follows:

. 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 (http://) and the relative path. Any path (../) is 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 and
, or between . The earlier it is, the earlier it will be executed. Especially if the page code is long, you want to To make the page pop up as early as possible, move it as far forward as possible.
 
【2. Pop-up window after setting】

Let’s talk about the settings of the pop-up window. 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.
Copy code The code is as follows:



Parameters Explanation:

end of js script

[3. Use functions to control pop-up windows]

The following is a complete code .
Copy code The code is as follows:





Any page content...

< /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: The window pops up when the browser reads the page;
Method 2: The window pops up when the browser leaves the page Window;
Method 3: Call with a connection:
Open a window
Note: Use the "# " is a virtual connection.
Method 4: Call with a button:


【4. At the same time 2 windows pop up]

Make slight changes to the source code:
Copy the code The code is as follows:



To avoid the two pop-up windows To cover, 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.

[5. Open the file 1.htm in the main window, and the small window page.html will pop up at the same time]

Add the following code to the area of ​​the main window:

Copy the code The code is as follows:



Join the area:
open.

[6. Timing closing control of pop-up windows]

Now we can control 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 area of ​​the page.html file:

Copy the code The code is as follows:



Then, use to replace the original in page.html That's it. (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.)

【7. Add a close button in the pop-up window】


Got it!

[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 pop-up small window. Through the following example, you can complete the above effect in one page.


Copy code The code is as follows:

 
 
 
 
 
打开一个窗口 
 
 
 

看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照 格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。 

【9、终极应用--弹出的窗口之Cookie控制】 

回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定 没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
有解决的办法吗?Yes! ;-) Follow me.我们使用cookie来控制一下就可以了。 

首先,将如下代码加入主页面HTML的区: 

复制代码 代码如下:

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

然后,用(注意不是openwin而是loadpop啊!)替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进 入该页面,窗口再也不会弹出了。真正的Pop-Only-Once! 
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template