返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js(jquery)实现无刷新跳转404页面不存在效果
  • 614
分享到

js(jquery)实现无刷新跳转404页面不存在效果

js无刷新跳转404jquery跳转404 2023-05-17 05:05:38 614人浏览 独家记忆
摘要

有时候我们希望临时让某个分类或者多个文章不能正常访问,手动给html文件改名?或者改后台改程序?太麻烦了。用本文的js代码很容易实现,而且使用得当很隐蔽。 html代码示例如下,注意

有时候我们希望临时让某个分类或者多个文章不能正常访问,手动给html文件改名?或者改后台改程序?太麻烦了。用本文的js代码很容易实现,而且使用得当很隐蔽。

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)实现无刷新跳转404页面不存在效果</div>
</body>
</html>

代码讲解:

1. https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js——是百度的jquery静态资源,稳定高速;

2. window.Configs={"typeid":1,"id":469}; ——程序调出分类typeid值,文章id值;

3. "undefined" != typeof window.Configs——判断window.Configs是否存在,未定义返回"undefined";

4. window.Configs.typeid !=2 || window.Configs.id !=469——分类typeid值不等于2或者文章id值不等于469,根据实际情况,这里可以使用多种匹配;

5. errHtml——定义的页面展示HTML代码;

6. document.title——标题;

隐蔽使用:

可以把js代码藏到其他js文件中,或者js加密等等。

到此这篇关于js(jquery)实现无刷新跳转404页面不存在效果的文章就介绍到这了,更多相关js无刷新跳转404页面不存在内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: js(jquery)实现无刷新跳转404页面不存在效果

本文链接: https://lsjlt.com/news/210718.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作