分享HTML页面点击按钮关闭页面的几种方式

于 2023-05-24 16:54:57 发布
阅读量1.5k 收藏 4
点赞数 1
文章标签： html java dreamweaver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45707610/article/details/130848956
版权
文章介绍了HTML页面中通过按钮关闭页面的几种方法，包括直接关闭、提示后关闭以及关闭并跳转到其他页面。这些方法利用JavaScript的window.close()和onbeforeunload事件来实现，提供了详细的示例代码供参考。
摘要由CSDN通过智能技术生成

这篇文章给大家分享HTML页面点击按钮关闭页面的几种方式，实现思路非常简单，有不带任何方式的关闭窗口，提示之后关闭页面，点击关闭本页面并跳转到其他页面等等，每种方式结合实例代码给大家介绍的非常详细，需要的朋友参考下吧

HTML页面点击按钮关闭页面的几种方式

一、不带任何方式的关闭窗口

1

<input type="button" name="close" value="关闭" onclick="window.close();" />

二、提示之后关闭页面

1

2

3

4

5

6

7

8

9

10

11

12

<script>

function custom_close(){

    if(confirm("您确定要关闭本页吗？")){

        window.opener=null;

        window.open('','_self');

        window.close();

    }

    else{

    }

}

</script>

<input id="btnClose" type="button" value="关闭本页" onClick="custom_close()" />

三、点击关闭本页面并跳转到其他页面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>html中</title>

</head>

<body onbeforeunload="return myFunction()">

<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>

<p>关闭当前窗口，点击以下链接触发 onbeforeunload 事件。</p>

<a href="">点击跳转到微点阅读</a>    

<script>

    function myFunction() {

        return "我在这写点东西...";

    }

</script>

</body>

</html>

四、将 三 中的方法放到js中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript 中</title>

</head>

<body>

    <p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p>

    <p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>

    <a href="">点击调转到微点阅读</a>

<script>

    window.onbeforeunload = function(event) {

        event.returnValue = "我在这写点东西...";

    };

</script>

</body>

</html>

到此这篇关于HTML页面点击按钮关闭页面的多种方式的文章就介绍到这了,希望可以帮到你。

来源：微点阅读   

xiaoweids
关注
HTML如何关闭当前页
ByteNinja的博客
10-04 418
需要注意的是，由于安全性限制，JavaScript只能关闭由JavaScript打开的页面。如果当前页是通过用户点击链接或浏览器地址栏中输入的URL打开的，那么使用。但是由于安全性限制，它只适用于由JavaScript打开的页面。如果页面是通过用户操作打开的，那么关闭当前页可能会被浏览器阻止。这种方法会首先打开一个空白的页面，然后立即关闭它，从而关闭当前页。此外，还有一种在JavaScript中关闭当前页的另一种方法是使用。总结一下，要关闭当前页，可以使用JavaScript中的。函数会被调用，它使用。
HTML页面中点击按钮关闭与取消页面的几种方式
仿站、源码搭建/迁移技术博客
01-22 4194
1、不带任何提示关闭窗口的js代码 <input type="button" name="close" value="关闭" οnclick="window.close();" /> 2、自定义提示关闭 <script language="javascript"> // 这个脚本是 ie6和ie7 通用的脚本 function custom_close(){ ...
H5界面关闭当前页面的方法
qq_44012207的博客
03-17 1万+
H5界面关闭当前页面 由于window.close方法只使用于IE浏览器，所以我根据userAgent判断客户端类型编写关闭方法，代码如下： function shutdown() { if(confirm("您确定要关闭本页吗？")) { var userAgent = navigator.userAgent; if(isWeiXin()) { WeixinJSBridge.call('closeWindow'
页面关闭事件-锚事件
aliven1的博客
01-30 469
window.onhashchange onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。 锚部分的实例：指定当前 URL 为 http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。 你可以使用以下方式调用事件: 通过设置Location 对象的location.hash或location.href属性修改锚部分。 使用不同书签导航到当前页面（使用"后退" 或"前进"按钮）...
点击关闭当前页面
weixin_34342992的博客
03-15 231
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML页面中点击按钮关闭页面几种方式与取消
热门推荐
xujing19920814的博客
01-15 9万+
HTML页面中如何按关闭按钮直接关闭页面 1、不带任何提示关闭窗口的js代码 2、自定义提示关闭 3、在即将离开当前页面(刷新或关闭)时 4、onload,onunload,onbeforeunload 5、删除或（卸载）window.onbeforeunload事件
纯HTML实现关闭按钮
xianrenyingzi的专栏
03-25 3877
css部分 <style> .close { position: absolute; display: inline-block; width: 30px; height: 30px; overflow: hidden; top: 5px; right: 5px; } .close::before,...
js关闭当前页面(窗口)的几种方式总结
10-27
如果希望在用户通过浏览器的最小化、最大化或关闭按钮关闭页面时弹出确认对话框，可以利用HTML的onbeforeunload事件。以下是如何实现这一点的示例： ```html 真的要关闭此窗口吗?'"> ``` 当用户尝试离开页面时，...
JS关闭窗口与JS关闭页面的几种方法小结
10-26
在探讨JavaScript（JS）中关闭窗口和页面的方法时，文章列举了多种不同的方式，并按特定的使用场景进行了分类。以下是对文章中提及的知识点的详细解释： 1. JS定时自动关闭窗口：通过在JS中使用定时器（setTimeout...
python模拟点击网页按钮实现方法
09-17
### Python模拟点击网页按钮实现方法 #### 前言 在Web自动化测试或者数据抓取过程中，经常需要模拟用户操作来触发网页上的某些事件。本文将详细介绍如何使用Python结合Selenium库来模拟点击网页上的按钮。 #### ...
JavaScript 关闭页面窗户
04-16
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> 关闭 [removed] var btn = document.getElementById('btn') btn.onclick = function () { if (confirm()) { window.close() } } [removed] </body> </html>
js 特效 html 特效 关闭窗口同时打开新窗口
06-14
js 特效 html 特效 关闭窗口同时打开新窗口 js 特效 html 特效 关闭窗口同时打开新窗口
解决layer弹出层的内容页点击按钮跳转到新的页面问题
10-16
在Web开发中，页面跳转主要有以下几种方式： 1. 通过`<a>`标签的`href`属性指定要跳转的URL，当点击链接时，浏览器会加载新的页面。 2. 在JavaScript中使用`window.location.href`或`document.location.href`来改变...
HTML页面点击按钮关闭页面的方式
hdxx2022的博客
12-03 7753
这篇文章给大家分享HTML页面点击按钮关闭页面的几种方式，实现思路非常简单，有不带任何方式的关闭窗口，提示之后关闭页面，点击关闭本页面并跳转到其他页面等等，每种方式结合实例代码给大家介绍的非常详细，需要的朋友参考下吧。
HTML关闭当前网页
passport_daizi的博客
03-30 2万+
代码一： 无提示关闭窗口-鼠标特效代码-网页特效代码-鸿新网—分享不一样的网络资源、让您不再为找资源而烦恼！ function shut(){ window.opener=null; window.open('','_self'); window.close(); } 代码2： 双击鼠标即可实现复制内容-鼠标特效代码-
html div关闭按钮样式,X关闭按钮只使用css
weixin_30938397的博客
06-15 693
你正在寻找的要点是tag-remove:before {content: 'x'; // here is your X(cross) sign.color: #fff;font-weight: 300;font-family: Arial, sans-serif;}你可以很容易地让自己重新开始.编辑：#mdiv{width:25px;height:25px;background-color:red...
实现在页面中单击按钮关闭页面
zgqtxwd的专栏
04-24 1622
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
HTML ＜summary＞ 标
weixin_50662941的博客
09-22 791
HTML <summary> 标签 HTML <summary>标签 什么是<summary>标签？ <summary> 标签包含 details 元素的标题，“details” 元素用于描述有关文档或文档片段的详细信息。 实例 <details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HT
html关闭当前页面标签页,javascript – 如何在浏览器窗口中关闭当前标签页？
weixin_39794347的博客
06-04 2335
你需要Javascript来做到这一点。使用window.close()：close();注意：隐含当前选项卡。这是等效的：window.close();或者可以指定一个不同的窗口。所以：function close_window() {if (confirm("Close Window?")) {close();}}与HTML：close要么：close此处返回false以防止事件的默认行为。否...
jquery 点击按钮window.open打开新页面，点击另外按钮关闭之前打开的页面有哪些方式
最新发布
11-13
jQuery 中，你可以使用 `window.open` 功能打开新的浏览器窗口，同时为了实现点击其他按钮关闭之前的页面，可以采用以下几种方法： 1. **JavaScript全局变量**： - 使用一个全局变量来跟踪当前打开的窗口引用，当需要关闭时，通过这个变量找到对应的窗口并调用 `close()` 方法。 ```javascript var activeWindow; function openPage() { activeWindow = window.open('new_page.html'); } function closeActiveWindow() { if (activeWindow) { activeWindow.close(); } } // 然后在按钮点击事件中使用这两个函数 $('#button1').click(openPage); $('#button2').click(closeActiveWindow); ``` 2. **事件监听**： - 可以给所有可能关闭的按钮添加一个通用的事件处理器，检测到目标窗口是否是你想要关闭的那个。 ```javascript function setActiveWindow(window) { if (typeof activeWindow !== 'undefined') { activeWindow.focus(); // 保持焦点 } activeWindow = window; } function closeModal() { setActiveWindow(window.parent); } $('#button1').click(function() { setActiveWindow(window.open('new_page.html')); }); $('#button2').click(closeModal); ``` 3. **HTML5 History API** (仅适用于现代浏览器): - 如果允许的话，可以利用 HTML5 的 history API 来替代传统的方式，通过 pushState 和 popstate 监听历史状态变化来控制页面。 ```javascript function openPage() { window.history.pushState(null, null, '#new-page'); } function closeCurrentPage() { window.history.back(); } // 同样地，绑定按钮事件 $('#button1').click(openPage); $('#button2').click(closeCurrentPage); ``` 请注意，对于旧版浏览器，可能需要处理一些兼容性问题，比如上述的 `history` API。在实际应用中，请选择最适合你项目需求的方式来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>