Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Implement a method to close the window by clicking on a newly opened page

Implement a method to close the window by clicking on a newly opened page

一个新手
Release： 2017-10-24 09:13:55
Original
1794 people have browsed it

1. During the development process, our front-end user experience sometimes requires clicking a button to close the current browser window. You can do it with html DOM.

2. Note: This writing method requires closing in a new window. target="_blank"

3. Open b.html from a.html and click the button in page b to close page B

4. Code of a page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 </head>
 <body>
  <div>
  <a href=&#39;button_colse.html&#39; target="_blank">测试点击按钮关闭当前页面</a>
  </div>
 </body>
</html>
Copy after login

5 . bPage code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css"></style>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 </head>
 <body>
  <div>
  点击我关闭本页面
  </div>
  <button  onclick="javascript:window.opener=null;window.open(&#39;&#39;,&#39;_self&#39;);window.close();" type="button" role="button" aria-disabled="false">
        <span class="ui-button-text">
        <span>关闭</span>
        </span>
 </button>
 </body>
</html>
Copy after login

The above is the detailed content of Implement a method to close the window by clicking on a newly opened page. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
closure Click page
source：php.cn
Previous article：How to implement countdown in JS Next article：About the difference between basic data types and reference data types in js
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
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
Select woocommerce related products using custom taxonomy with 3 level hierarchy I have a woocommerce store with a custom classification of "Sports". The classif...
From 2024-04-06 20:05:30
0
1
544
Can a workerpool declared in multiple routes still maintain its cpu usage without caring about the threshold I'm hoping to find a node.js system with a workerpool to handle CPU intensive tasks, but I...
From 2024-04-06 19:54:23
0
1
444
In mobile view, how can I close this navigation bar when the user clicks on the link? When the user clicks a link to browse the website, the navigation bar does not close? I've...
From 2024-04-06 19:23:03
0
1
411
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template