js(jquery)實現(xiàn)無刷新跳轉(zhuǎn)404頁面不存在效果
有時候我們希望臨時讓某個分類或者多個文章不能正常訪問,手動給html文件改名?或者改后臺改程序?太麻煩了。用本文的js代碼很容易實現(xiàn),而且使用得當(dāng)很隱蔽。
html代碼示例如下,注意需要jquery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>測試404頁面不存在</title>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">window.Configs={"typeid":1,"id":469};</script>
<script>
if ("undefined" != typeof window.Configs && (window.Configs.typeid !=2 || window.Configs.id !=469)) {
var errHtml = '<div class="error-page-wrap"><em>404</em><h1>\u62b1\u6b49\uff01\u60a8\u8bbf\u95ee\u7684\u9875\u9762\u4e0d\u5b58\u5728</h1><p>\u00b7\u8be5\u9875\u9762\u53ef\u80fd\u5df2\u7ecf\u5220\u9664\u6216\u66f4\u540d
\u00b7\u8bf7\u68c0\u67e5\u8f93\u5165\u7684\u5730\u5740\u662f\u5426\u6b63\u786e</p><a href="/" class="home404">\u8fd4\u56de\u9996\u9875</a></div>';
(lookupCallEnabled = !1,
document.title = "404-\u9875\u9762\u4e0d\u5b58\u5728",
jQuery("html").hide(),
jQuery(function(a) {
a("body").html(errHtml);
a("html").show();
a("body").css("background", "#fff")
})
);
}
</script>
<style>
.error-page-wrap{width:100%;background:#ffffff;font-size:13px;margin:40px auto;padding:20px 10px;text-align:center;overflow:hidden}
.error-page-wrap a {color:#333;text-decoration:none;}
.error-page-wrap em{width:225px;height:45px;margin:0 auto;text-indent:-999em;display:inline-block;overflow:hidden;background:url(/static/image/logo404.png) no-repeat;}
.error-page-wrap h1{font-size:24px;color:#c71508;font-family:'Microsoft Yahei', Georgia;margin:10px 0 20px ;}
.error-page-wrap p{line-height:28px;}
.error-page-wrap .home404{width:92px;line-height:28px;height:28px;display:inline-block;border-radius:3px;background:#2A9325;font-weight:bold;color:#fff;text-align:center;margin:15px 0 0 6px;overflow:hidden;cursor:pointer;}
</style>
</head>
<body>
<div>js(jquery)實現(xiàn)無刷新跳轉(zhuǎn)404頁面不存在效果</div>
</body>
</html>代碼講解:
1. https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js——是百度的jquery靜態(tài)資源,穩(wěn)定高速;
2. window.Configs={"typeid":1,"id":469}; ——程序調(diào)出分類typeid值,文章id值;
3. "undefined" != typeof window.Configs——判斷window.Configs是否存在,未定義返回"undefined";
4. window.Configs.typeid !=2 || window.Configs.id !=469——分類typeid值不等于2或者文章id值不等于469,根據(jù)實際情況,這里可以使用多種匹配;
5. errHtml——定義的頁面展示HTML代碼;
6. document.title——標(biāo)題;
隱蔽使用:
可以把js代碼藏到其他js文件中,或者js加密等等。
到此這篇關(guān)于js(jquery)實現(xiàn)無刷新跳轉(zhuǎn)404頁面不存在效果的文章就介紹到這了,更多相關(guān)js無刷新跳轉(zhuǎn)404頁面不存在內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS+CSS實現(xiàn)TreeMenu二級樹形菜單完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)TreeMenu二級樹形菜單,以完整實例形式較為詳細的分析了JS二級樹形菜單的節(jié)點元素操作技巧,非常簡單實用,需要的朋友可以參考下2015-09-09
JavaScript判斷是否為數(shù)字的幾種方式匯總(推薦!)
有時候需要根據(jù)輸入的內(nèi)容來進行計算,這個時候就需要判斷輸入的內(nèi)容是否是數(shù)字,下面這篇文章主要給大家介紹了關(guān)于JavaScript判斷是否為數(shù)字的幾種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
利用js-cookie實現(xiàn)前端設(shè)置緩存數(shù)據(jù)定時失效
這篇文章主要介紹了利用js-cookie實現(xiàn)前端設(shè)置緩存數(shù)據(jù)定時失效,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
unapp微信小程序轉(zhuǎn)發(fā)分享及攜帶參數(shù)的2種方式
這篇文章主要給大家介紹了關(guān)于unapp微信小程序轉(zhuǎn)發(fā)分享及攜帶參數(shù)的2種方式,我們在微信小程序中經(jīng)常會使用到分享商品海報,或者是重繪微信小程序分享鏈的圖片功能,需要的朋友可以參考下2023-11-11

