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

May 16, 2016 pm 05:04 PM
js window.open parameter

[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! 
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 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)

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

i9-12900H parameter evaluation list i9-12900H parameter evaluation list Feb 23, 2024 am 09:25 AM

i9-12900H is a 14-core processor. The architecture and technology used are all new, and the threads are also very high. The overall work is excellent, and some parameters have been improved. It is particularly comprehensive and can bring users Excellent experience. i9-12900H parameter evaluation review: 1. i9-12900H is a 14-core processor, which adopts the q1 architecture and 24576kb process technology, and has been upgraded to 20 threads. 2. The maximum CPU frequency is 1.80! 5.00ghz, which mainly depends on the workload. 3. Compared with the price, it is very suitable. The price-performance ratio is very good, and it is very suitable for some partners who need normal use. i9-12900H parameter evaluation and performance running scores

C++ function parameter type safety check C++ function parameter type safety check Apr 19, 2024 pm 12:00 PM

C++ parameter type safety checking ensures that functions only accept values ​​of expected types through compile-time checks, run-time checks, and static assertions, preventing unexpected behavior and program crashes: Compile-time type checking: The compiler checks type compatibility. Runtime type checking: Use dynamic_cast to check type compatibility, and throw an exception if there is no match. Static assertion: Assert type conditions at compile time.

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

window.openHow to close an open window window.openHow to close an open window Dec 06, 2023 pm 02:15 PM

Methods to close an open window: 1. Use "window.close" to close the new window; 2. Use "window.location" to redirect; 3. Use "window.blur" and "window.focus"; 4. Use "window. .history" fallback; 5. Use "window.opener".

The relationship between js and vue The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

See all articles