0


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

这篇文章给大家分享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 javascript 前端

本文转载自: https://blog.csdn.net/hdxx2022/article/details/128148730
版权归原作者 hdxx2022 所有, 如有侵权,请联系我们删除。

“HTML页面点击按钮关闭页面的方式”的评论:

还没有评论