脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js无刷新跳转404页面不存在

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

 更新时间：2023年04月22日 09:27:27   投稿：yin  
有时候我们希望临时让某个分类或者多个文章不能正常访问，手动给html文件改名？或者改后台改程序？太麻烦了。用本文的js代码很容易实现，而且使用得当很隐蔽。这篇文章主要介绍了js（jquery）实现无刷新跳转404页面不存在效果,需要的朋友可以参考下

有时候我们希望临时让某个分类或者多个文章不能正常访问，手动给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页面不存在内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • js中获取jsp表单中radio类型的值简单实例

    js中获取jsp表单中radio类型的值简单实例

    下面小编就为大家带来一篇js中获取jsp表单中radio类型的值简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
    2016-02-02
  • 微信小程序进行微信支付的步骤昂述

    微信小程序进行微信支付的步骤昂述

    最近开发微信小程序进入到支付阶段，一直以来从事App开发，所以支付流程还是熟记于心的。下面通过本文给大家讲述下微信小程序进行微信支付的步骤,需要的朋友可以参考下
    2016-12-12
  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

    这篇文章主要介绍了JavaScript Promise和Async/Await，对异步编程感兴趣的同学，可以参考下
    2021-04-04
  • WEEX环境搭建与入门详解

    WEEX环境搭建与入门详解

    这篇文章主要介绍了WEEX环境搭建与入门详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    这篇文章主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
    2018-07-07
  • 基于javascript实现动态时钟效果

    基于javascript实现动态时钟效果

    这篇文章主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS使用对象的defineProperty进行变量监控操作示例

    JS使用对象的defineProperty进行变量监控操作示例

    这篇文章主要介绍了JS使用对象的defineProperty进行变量监控操作,结合实例形式分析了对象defineProperty方法的功能及简单使用技巧,需要的朋友可以参考下
    2019-02-02
  • 基于JavaScript实现年份数字拼图效果

    基于JavaScript实现年份数字拼图效果

    时光荏苒，2022年又要收尾了，公司的年会是不是都安排上了？前几天看到一个年会抽奖系统，功能十分的强大，其中有一个年份数字的拼图效果深深的吸引了哥，决定用JS实现一下该效果，需要的可以参考一下
    2022-12-12
  • JS实现简单的点赞与踩功能示例

    JS实现简单的点赞与踩功能示例

    这篇文章主要介绍了JS实现简单的点赞与踩功能,涉及javascript针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12

最新评论