Home Web Front-end JS Tutorial Full analysis of window.open functions_Basic knowledge

Full analysis of window.open functions_Basic knowledge

May 16, 2016 pm 07:25 PM

[1. The most basic pop-up window code]
In fact, the code is very simple:

Because it is a piece of javascripts code, they should be placed between
.
works on some older browsers. In these older 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 written in front, absolutely Both path (http://) and relative path (..

/) are 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. It can be between and  
, or between
and

ody>. The earlier the code is, the earlier it will be executed, especially on the page. The code is long, and if you want the page to pop up earlier, try to put it in front of

.

【2. Pop-up window after setting】
Let’s talk about the settings of 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

situation of the page.




Parameter explanation:

End of js script
[3. Use functions to control pop-up windows] The following is a complete code.






...Any page content...




A function openwin() is defined here, and the function content is to open a window. There is no
any use before calling it.
How to call it?
Method 1:
Pop-up window 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: Use a button to call:



[4. Pop up 2 windows at the same time]
Slightly change the source code:


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. Open the file 1.htm in the main window and pop up the small window page.html at the same time]
The following code is added to the main window
area:



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
...), let it 10 Wouldn’t it be cooler to automatically shut down after seconds?
First, add the following code to the
area of ​​the page.html file:


Then, use the sentence
to replace the original in page.html DY>This sentence is enough. (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. In Add a close button to the pop-up window]





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.







Open a window


<script> <BR><!-- <BR>window.open ('page.html') <BR>--> <BR></script> <script><br>ipt">标签和</script><script> <BR><!-- <BR>window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, <br><br>left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n <br><br>o, status=no') <BR>//写成一行 <BR>--> <BR></script> <script> js脚本开始; <BR>window.open 弹出新窗口的命令; <BR>'page.html' 弹出窗口的文件名; <BR>'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替; <BR>height=100 窗口高度; <BR>width=400 窗口宽度; <BR>top=0 窗口距离屏幕上方的象素值; <BR>left=0 窗口距离屏幕左侧的象素值; <BR>toolbar=no 是否显示工具栏,yes为显示; <BR>menubar,scrollbars 表示菜单栏和滚动栏。 <BR>resizable=no 是否允许改变窗口大小,yes为允许; <BR>location=no 是否显示地址栏,yes为允许; <BR>status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; <br><br><BR></script><script> <BR><!-- <BR>function openwin() { <BR>window.open ("page.html", "newwindow", "height=100, width=400, toolbar <br><br>=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") <br><br><BR>//写成一行 <BR>} <BR>//--> <BR></script>Look at the code in OpenWindow.document.write(). Isn’t it standard HTML? Just write more lines in the format <script> <BR><!-- <BR>function openwin() { <BR>window.open ("page.html", "newwindow", "height=100, width=100, top=0, <br><br>left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n <br><br>o, status=no") <BR>//写成一行 <BR>window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 <br><br>00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca <br><br>tion=no, status=no") <BR>//写成一行 <BR>} <BR>//--> <BR></script><script> <BR><!-- <BR>function openwin() { <BR>window.open("page.html","","width=200,height=200") <BR>} <BR>//--> <BR></script>. Be sure to note that an error will occur if there is one more label or one less label. Remember to end with <script> <br><br>function closeit() { <br><br>setTimeout("self.close()",10000) //毫秒 <br><br>} <br><br></script><script> <BR>function openwin() <BR>{ <BR>OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no <br><br>,scrollbars="+scroll+",menubar=no"); <BR>//写成一行 <BR>OpenWindow.document.write("<TITLE>例子") <BR>OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") <BR>OpenWindow.document.write("<h1>Hello!") <BR>OpenWindow.document.write("New window opened!") <BR>OpenWindow.document.write("") <BR>OpenWindow.document.write("") <BR>OpenWindow.document.close() <BR>} <BR></script>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><br>function loadpopup(){ <BR>if (get_cookie('popped')==''){ <BR>openwin() <BR>document.cookie="popped=yes" <BR>} <BR>} <br><br></script> 

然后,用(注意不是openwin而是loadpop啊!) 

替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进 

入该页面,窗口再也不会弹出了。
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 jQuery Fun and Games Plugins 10 jQuery Fun and Games Plugins Mar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries? How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header Background jQuery Parallax Tutorial - Animated Header Background Mar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

Getting Started With Matter.js: Introduction Getting Started With Matter.js: Introduction Mar 08, 2025 am 12:53 AM

Matter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction. Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a

Auto Refresh Div Content Using jQuery and AJAX Auto Refresh Div Content Using jQuery and AJAX Mar 08, 2025 am 12:58 AM

This article demonstrates how to automatically refresh a div's content every 5 seconds using jQuery and AJAX. The example fetches and displays the latest blog posts from an RSS feed, along with the last refresh timestamp. A loading image is optiona

How do I optimize JavaScript code for performance in the browser? How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

See all articles