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

2024-05-19 22:11:52

这篇文章给大家分享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="https://www.weidianyuedu.com">点击跳转到微点阅读</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="https://www.weidianyuedu.com">点击调转到微点阅读网</a>

<script>

window.onbeforeunload = function(event) {

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

};

</script>

</body>

</html>

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

转载自：https://www.weidianyuedu.com

HTML页面点击按钮关闭页面的方式相关推荐

HTML_页面点击按钮关闭页面的几种方式
HTML页面点击按钮关闭页面的几种方式文章目录 HTML页面点击按钮关闭页面的几种方式一.不带任何方式的关闭窗口二.提示之后关闭页面三.点击关闭本页面并跳转到其他页面四.将三中的方法放到 ...
HTML页面中点击按钮关闭页面几种方式与取消
1.不带任何提示关闭窗口的js代码 1 <input type="button" name="close" value="关闭" on ...
dwz中弹出的窗口页面如何获取前页面(点击按钮的页面)的元素？？？
在页面A.jsp中点击一个按钮,使用$.pdialog.open()方法弹出b.jsp页面(对话框窗口),我要在b.jsp中选中值然后关闭窗口(b.jsp)返回值给A.jsp~ =========== ...
html页面点击按钮实现页面跳转
方法1.在button标签外嵌套一个a标签,利用超链接进行跳转: <a href="https://www.baidu.com/" target="_blank&q ...
angular点击按钮弹出页面_Axure RP8：如何做出点击按钮切换页面效果？
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
【HTML5】页面点击按钮添加一行删除一行全选反选全不选
页面点击按钮添加一行删除一行全选反选全不选页面效果图如下 html页面代码 <!DOCTYPE html> <html><head>< ...
用户输入自己的【姓名年龄爱好】 + 加CP【姓名年龄爱好】，点击按钮，页面显示该用户的信息点击提交按钮，JSON显示用户信息+副本信息（副本初始值是{}）
本文主要是利用了BOM.DOM和json/js数据的转换等知识来综合操练的一个小例子例子如下: 用户输入自己的[姓名年龄爱好] + 加CP[姓名年龄爱好],点击按钮,页面显示该用户的信息点 ...
uniapp点击按钮保存页面为图片到本地
uniapp点击按钮保存页面为图片到本地首先写一个按钮创建事件 <button class="info" @click="capture()"> ...
android中怎么实现点击按钮进行页面的跳转
第一步:先创建好两个Activity.如图 (PS:是创建Activity,不是创建java类.右击包名,找到new-->other-->android-->AndroidActiv ...

最新文章

热门文章