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


Posted in HTML / CSS onDecember 24, 2022

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

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

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

二、提示之后关闭页面

<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()" />

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

<!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="http://www.3water.com">点击跳转到三水点靠木</a>     
<script>
    function myFunction() {
        return "我在这写点东西...";
    }
</script>
</body>
</html>

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

<!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="http://www.3water.com">点击调转到三水点靠木</a>
<script>
    window.onbeforeunload = function(event) {
        event.returnValue = "我在这写点东西...";
    };
</script>
</body>
</html>

到此这篇关于HTML页面点击按钮关闭页面的多种方式的文章就介绍到这了,更多相关html点击按钮关闭页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 #HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 #HTML / CSS
You might like
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
python脚本第一行如何写
2020/08/30 Python
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
大四毕业生学习总结的自我评价
2013/10/31 职场文书
烹饪自我鉴定
2014/03/01 职场文书
房产买卖委托公证书
2014/04/04 职场文书
移风易俗倡议书
2014/04/15 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
使用CSS连接数据库的方式
2022/02/28 HTML / CSS