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

系统管理员 2024-03-31 14:12 77阅读 0赞

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>name</code><code>=</code><code>"close"</code> <code>value</code><code>=</code><code>"关闭"</code> <code>onclick</code><code>=</code><code>"window.close();"</code> <code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

#### 二、提示之后关闭页面 ####

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>&lt;</code><code>script</code><code>&gt;</code> <code>function custom_close(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if(confirm("您确定要关闭本页吗？")){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.opener=null;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.open('','_self');</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.close();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;</code><code>input</code> <code>id</code><code>=</code><code>"btnClose"</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"关闭本页"</code> <code>onClick</code><code>=</code><code>"custom_close()"</code> <code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;</code><code>html</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code> <code>&lt;</code><code>title</code><code>&gt;html中&lt;/</code><code>title</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code> <code>onbeforeunload</code><code>=</code><code>"return myFunction()"</code><code>&gt;</code> <code>&lt;</code><code>p</code><code>&gt;该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;</code><code>p</code><code>&gt;关闭当前窗口，点击以下链接触发 onbeforeunload 事件。&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;</code><code>a</code> <code>href</code><code>="</code><a href="https://www.weidianyuedu.com" title="https://www.weidianyuedu.com" rel="nofollow">https://www.weidianyuedu.com</a><code>"&gt;点击跳转到微点阅读&lt;/</code><code>a</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; </code> <code>&lt;</code><code>script</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function myFunction() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return "我在这写点东西...";</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

####  ####

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;</code><code>html</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code> <code>&lt;</code><code>title</code><code>&gt;JavaScript 中&lt;/</code><code>title</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>a</code> <code>href</code><code>="</code><a href="https://www.weidianyuedu.com" title="https://www.weidianyuedu.com" rel="nofollow">https://www.weidianyuedu.com</a><code>"&gt;点击调转到微点阅读网&lt;/</code><code>a</code><code>&gt;</code> <code>&lt;</code><code>script</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onbeforeunload = function(event) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>event.returnValue = "我在这写点东西...";</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

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

转载自：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[https_www.weidianyuedu.com]: https://www.weidianyuedu.com