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制作日历实现代码
Jan 21 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现网站注册验证码生成类
2017/06/08 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python 中如何获取列表的索引
2019/07/02 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
行政专员岗位职责
2014/01/02 职场文书
倡导文明标语
2014/06/16 职场文书
党支部四风整改方案
2014/10/25 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
优秀高中学生评语
2014/12/30 职场文书
具结保证书
2015/01/17 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
入党介绍人意见2015
2015/06/01 职场文书
毕业典礼主持词
2015/06/29 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python