Technical summary sharing of javascript pop-up windows-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Technical summary sharing of javascript pop-up windows

小云云

Mar 15, 2018 pm 02:12 PM

javascriptjs

This article mainly shares with you the technical summary of javascript pop-up windows. Here are some pop-up window parameters. You can set them by yourself. The parameters are optional and separated by commas. String --List the object table separated by commas. Each item has its own value, and they will be separated (eg: "fullscreen=yes, toolbar=yes"). The following are the various features that are supported.

##titlebar = { yes | no | 1 | 0 }Specifies whether to display the title bar in the window. In the case of non-calling HTML Application or a dialog box, this item will be ignored The default is yes##toolbar = { yes | no | 1 | 0 }##width = numberSpecify the width of the window, the unit is pixels The minimum value is 100top = numberSpecify the position of the top of the window, The unit is pixelsThe value must be greater than or equal to 0

1. The most basic pop-up window code　

　<script> 
　　<!-- 
　　window.open (&#39;page.html&#39;) 
　　--> 
　　</script>

　
Because this is a piece of javascripts code, they should be placed between

works on 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, absolute path (http://) and relative 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 to any position in the HTML, between and or between. The earlier the code is, the earlier it will be executed. Especially if the page code is long and you want the page to pop up earlier, try to put it as far forward as possible.
　
2. The 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.

　<script> 
　　<!-- 
　　window.open (&#39;page.html&#39;, &#39;newwindow&#39;, &#39;height=100, width=400, top=0, left=0, 
toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no&#39;) 
//这句要写成一行
　　--> 
　　</script>

#'page.html' The 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 from the window to the top of the screen;
left=0 pixel value from the window to 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 the window size to be changed, yes 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;
　 End of js script

3. Use functions to control pop-up windows
　
The following 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>

　A function openwin() is defined here, and the content of the function is to open a window. It serves no purpose until it is called. How to call it? 　
Method one

: A window pops up when the browser reads the page;

Method two

Pop-up window when the browser leaves the page;
　Method 3: Call with a connection:
　 Note: The "#" used is a virtual connection. 　
Method 4: Call with a button: 　
　

4. Pop up 2 windows at the same time 　　
　　　　　　　　　　　　
##　　　Use top and left to control the pop-up position so that it does 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 pop up the small window page.html

The following code is added to the main window area:

<script LANGUAGE="JavaScript"> 
　　<!-- 
　　function openwin() { 
　　window.open ("page.html", "newwindow", "height=100, 
width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
location=n o, status=no")　
//写成一行
 
　　window.open ("page2.html", "newwindow2", "height=100, 
width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, 
loca tion=no, status=no")　
//写成一行
 
　　} 
　　//--> 
　　</script>

Add

Area: 　open.
6. Timing closing control of pop-up windows 　 Next we will perform some control on the pop-up windows, and the effect will be better. Wouldn't it be cooler if we added 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), so that 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>

　　然后，再用

这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
7、在弹出窗口中加上一个关闭按钮

<FORM> 
　　<INPUT TYPE=&#39;BUTTON&#39; VALUE=&#39;关闭&#39; onClick=&#39;window.close()&#39;> 
　　</FORM>

　　呵呵，现在更加完美了！
8、内包含的弹出窗口-一个页面两个窗口　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

　<html> 
　　<head> 
　　<SCRIPT LANGUAGE="JavaScript"> 
　　function openwin() 
　　{ 
　　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no 
,scrollbars="+scroll+",menubar=no"); 
　　//写成一行 
　　OpenWindow.document.write("<TITLE>例子</TITLE>") 
　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>") 
　　OpenWindow.document.write("<h1 id="Hello">Hello!</h1>") 
　　OpenWindow.document.write("New window opened!") 
　　OpenWindow.document.write("</BODY>") 
　　OpenWindow.document.write("</HTML>") 
　　OpenWindow.document.close() 
　　} 
　　</SCRIPT> 
　　</head> 
　　<body> 
　　<a href="#" onclick="openwin()">打开一个窗口</a> 
　　<input type="button" onclick="openwin()" value="打开窗口"> 
　　</body> 
　　</html>

　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。
9、终极应用--弹出的窗口之Cookie控制
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病，比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，我们使用cookie来控制一下就可以了。
　　首先，将如下代码加入主页面HTML的

区：

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

然后，用

（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

相关推荐：

jQuery实现简单的弹出窗口实例

JS弹出窗口的运用与技巧大全

jQuery实现的模拟弹出窗口功能示例

channelmode = { yes \| no \| 1 \| 0 }	Whether to display the ladder mode in the window	The default is no
directories = { yes \| no \| 1 \| 0 }	Whether to display various buttons in the window	The default is yes
fullscreen = { yes \| no \| 1 \| 0 }	Whether to display the browser in full screen mode	The default is no
height = number	Specify the height of the window, the unit is pixels	The minimum value is 100
left = number	Specify The distance between the window and the left border, in pixels	The value must be greater than or equal to 0
location = { yes \| no \| 1 \| 0 }	Specify whether to display the address bar in the window	The default is yes
menubar = { yes \| no \| 1 \| 0 }	Specify whether to display the address bar in the window Display the menu bar in the window	The default is yes
resizable = { yes \| no \| 1 \| 0 }	Specify whether to display the resizable menu bar in the window Handle for user resizing	Default is yes
scrollbars = { yes \| no \| 1 \| 0 }	Specifies whether to display in the window Horizontal or vertical scroll bar	The default is yes
status = { yes \| no \| 1 \| 0 }	Specifies whether to display status in the window Column	Defaults to yes

Specify whether to display the toolbar in the window, including buttons such as forward, back, stop, etc.	The default is yes

The above is the detailed content of Technical summary sharing of javascript pop-up windows. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

What is PEAR in PHP?Apr 28, 2025 pm 04:38 PM

PEAR is a PHP framework for reusable components, enhancing development with package management, coding standards, and community support.

What are the uses of PHP?Apr 28, 2025 pm 04:37 PM

PHP is a versatile scripting language used mainly for web development, creating dynamic pages, and can also be utilized for command-line scripting, desktop apps, and API development.

What was the old name of PHP?Apr 28, 2025 pm 04:36 PM

The article discusses PHP's evolution from "Personal Home Page Tools" in 1995 to "PHP: Hypertext Preprocessor" in 1998, reflecting its expanded use beyond personal websites.

How can you prevent session fixation attacks?Apr 28, 2025 am 12:25 AM

Effective methods to prevent session fixed attacks include: 1. Regenerate the session ID after the user logs in; 2. Use a secure session ID generation algorithm; 3. Implement the session timeout mechanism; 4. Encrypt session data using HTTPS. These measures can ensure that the application is indestructible when facing session fixed attacks.

How do you implement sessionless authentication?Apr 28, 2025 am 12:24 AM

Implementing session-free authentication can be achieved by using JSONWebTokens (JWT), a token-based authentication system where all necessary information is stored in the token without server-side session storage. 1) Use JWT to generate and verify tokens, 2) Ensure that HTTPS is used to prevent tokens from being intercepted, 3) Securely store tokens on the client side, 4) Verify tokens on the server side to prevent tampering, 5) Implement token revocation mechanisms, such as using short-term access tokens and long-term refresh tokens.

What are some common security risks associated with PHP sessions?Apr 28, 2025 am 12:24 AM

The security risks of PHP sessions mainly include session hijacking, session fixation, session prediction and session poisoning. 1. Session hijacking can be prevented by using HTTPS and protecting cookies. 2. Session fixation can be avoided by regenerating the session ID before the user logs in. 3. Session prediction needs to ensure the randomness and unpredictability of session IDs. 4. Session poisoning can be prevented by verifying and filtering session data.

How do you destroy a PHP session?Apr 28, 2025 am 12:16 AM

To destroy a PHP session, you need to start the session first, then clear the data and destroy the session file. 1. Use session_start() to start the session. 2. Use session_unset() to clear the session data. 3. Finally, use session_destroy() to destroy the session file to ensure data security and resource release.

How can you change the default session save path in PHP?Apr 28, 2025 am 12:12 AM

How to change the default session saving path of PHP? It can be achieved through the following steps: use session_save_path('/var/www/sessions');session_start(); in PHP scripts to set the session saving path. Set session.save_path="/var/www/sessions" in the php.ini file to change the session saving path globally. Use Memcached or Redis to store session data, such as ini_set('session.save_handler','memcached'); ini_set(

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

1 months agoByDDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks agoByDDD

InZoi: How To Apply To School And University

3 weeks agoByDDD

Hot Tools

WebStorm Mac version

Useful JavaScript development tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software