HTML中button標簽點擊實現頁面跳轉的三種方法

法1：使用onclick事件

<input type="button" value="按鈕"
onclick="javascrtpt:window.location. />

或者直接使用button標簽

<button onclick="window.location.>百度</button>

方法2：在button標簽外套一個a標簽

<a >
 <button>百度</button>
</a>

或使用

<a ><input type="button" value='百度'></a>

方法3：使用JavaScript函數

信
51rgb
網頁自動跳轉頁面的代碼在很多時候都非常的有用，下面的是兩個簡單的例子。僅供參考。

方案一，用<meta>里直接寫刷新語句：

<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">
<title>html網頁自動跳轉代碼--西農大網站</title>
</head>
<body>
測試：html網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br />
</body></html>

方案二，用javascript腳本來跳轉

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進入西農大網站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在進入，請稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count
function count{
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count",100);}
else
{window.location =http://www.51rgb.com;}
}</script>
</p>
</form><p align="center">
測試：html網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉,<astyle="text-decoration: none" ><font color="#FF0000">請點這里</font></a>.</p>
</body>
</html>

↓↓↓

言

實踐源于需求，



一個前端需求，需求如下：
前端網頁有三種聯系方式，郵箱，手機號，微信，
怎么實現手機上在網頁上點擊該文字進行相應的跳轉
如：
點擊郵箱號跳轉到郵箱應用
點擊手機號跳轉到撥號應用
點擊微信號跳轉到微信應用
點擊QQ號跳轉到QQ應用

下面是簡單的實現步驟。
              -- 記錄與 2021年09月19日 測試可用

環境

簡單的HTML頁面
任意手機瀏覽器
Android手機 或 IOS手機

HTML實現

點擊郵箱號跳轉到郵箱應用 (已測試)

<a href="mailto:support@xxx.com">郵箱：mailto:support@xxx.com</a>

點擊手機號跳轉到撥號應用 (已測試)

<a href="tel:123">手機：123 </a>

點擊微信號跳轉到微信應用 (已測試)

<a href="weixin://">微信號：123 </a>

點擊QQ號跳轉到QQ應用 (未測試)

# 這個未測試，網上兩種方法，可以都實踐下
<a hfer="tencent://message/?uin=12345&Site=&Menu-=yes">彈出QQ為12345的窗口</a>

<a href="http://wpa.qq.com/msgrd?v=3&uin=1846189021&site=qq&menu=yes">聯系客服</a>

整理

<a href="mailto:support@xxx.com">聯系我們</a>
<a href="tel:110">123 </a>
<a href="weixin://">123 </a>
<a hfer="tencent://message/?uin=12345&Site=&Menu-=yes">彈出QQ為12345的窗口</a>

總結

前三個郵箱、手機、微信都自身測試過，
Android， IOS點擊可跳轉對應應用，

QQ只是在網上搜了下，沒做測試，可以嘗試下看能不能成功

不過話說回來，找了半天，只在網上一些博客里找到了上述這幾種的應用跳轉，
不知道有沒有比較官方的文檔或者資料可以找到的，
當然，也可能是我關鍵詞沒搜對？
有知道的麻煩留言或者私我呼我下