js让网站以指定的浏览器可以打开

  • 文章介绍
  • 评价建议
  • 因为有部分网站对浏览器的要求极为严格,而其他浏览器打开又会有bug或者无法操作等情况。

    那么这时候 就需要有一个代码,禁止该浏览器打开,或者指定浏览器才可以打开。 否则跳转到指定页面

    如下图

    js让网站以指定的浏览器可以打开

    实际操作的时候 把下面代码中的 js部分添加到网站的公共文件 一般为footer.php

    然后将style标签中的css文件,单独引入。即可!

    代码:

    <! DOCTYPE>
    <html>
    <head>
    <style>
    
    .mod_popup {
     position:fixed;
     z-index:1000
    }
    .mod_popup,
    .popup__mask {
     top:0;
     right:0;
     bottom:0;
     left:0
    }
    .popup__mask {
     position:absolute;
     z-index:1;
     background:rgba(0,0,0,.5)
    }
    .popup__box {
     position:absolute;
     top:50%;
     left:50%;
     z-index:2;
     min-width:316px;
     overflow:hidden;
     border-radius:8px;
     color:#000;
     background:#fff;
     -ms-transform:translate(-50%,-50%);
     transform:translate(-50%,-50%)
    }
    .popup__hd {
     height:56px;
     line-height:56px;
     background:#f5f6fa
    }
    .popup__tit {
     text-align:center;
     font-size:18px
    }
    .popup__bd {
     position:relative;
     margin:42px 10px 0;
     padding:0 22px;
     max-height:600px;
     overflow:auto
    }
    .popup__para {
     font-size:18px;
     font-weight:700
    }
    .popup__para--center {
     text-align:center
    }
    .popup__txt_thin {
     font-size:16px
    }
    .popup__ft {
     position:relative;
     margin:32px 0;
     text-align:center;
     font-size:0
    }
    .popup__ft__txt {
     position:absolute;
     font-size:14px;
     left:0;
     top:0;
     padding-left:26px;
     line-height:40px
    }
    .popup__btn {
     position:relative;
     display:inline-block;
     width:120px;
     box-sizing:border-box;
     height:40px;
     line-height:38px;
     margin:0 6px;
     white-space:nowrap;
     font-size:16px;
     font-weight:700;
     color:rgba(0,0,0,.6);
     border:1px solid rgba(0,0,0,.2);
     border-radius:999px;
     background:#fff
    }
    .popup__btn:hover {
     color:#22d59c;
     border-color:#22d59c
    }
    .popup__btn:active {
     color:#23c28f;
     border-color:#23c28f
    }
    .popup__btn.disabled {
     color:rgba(0,0,0,.3)!important;
     border-color:rgba(0,0,0,.15)!important;
     cursor:default
    }
    .popup__btn--primary {
     color:#fff;
     border:none;
     background:#22d59c
    }
    .popup__btn--primary:hover {
     color:#fff;
     background:#24e0a4
    }
    .popup__btn--primary:active {
     color:#fff;
     background:#23c28f
    }
    .popup__btn--primary.disabled {
     color:#fff!important;
     background:rgba(34,213,156,.5)!important
    }
    .popup__close {
     position:absolute;
     font-size:0;
     top:10px;
     right:10px;
     z-index:3;
     width:20px;
     height:20px;
     cursor:pointer;
     -ms-transform:rotate(45deg);
     transform:rotate(45deg)
    }
    .popup__close:after,
    .popup__close:before {
     content:"";
     position:absolute;
     border-radius:2px;
     background:#bababa
    }
    .popup__close:before {
     top:9px;
     left:2px;
     width:16px;
     height:2px
    }
    .popup__close:after {
     top:2px;
     left:9px;
     width:2px;
     height:16px
    }
    .popup__close:hover:after,
    .popup__close:hover:before {
     background:#22d59c
    }
    .popup--rich .popup__box {
     display:flex;
     flex-direction:column;
     width:800px
    }
    .popup--rich .popup__bd {
     flex-grow:1;
     margin:0;
     padding:0;
     overflow:visible
    }
    .popup--rich .popup__ft {
     margin-right:20px;
     text-align:right
    }
    .popup--rich .popup__close {
     top:18px;
     right:15px
    }
    .popup--login .popup__box {
     width:700px;
     height:400px
    }
    .popup_tab {
     position:relative;
     z-index:2;
     height:56px;
     line-height:56px;
     text-align:center;
     font-size:0;
     border:1px solid rgba(0,0,0,.05);
     background-color:#fff
    }
    .popup_tab__item {
     display:inline-block;
     margin:0 50px;
     font-size:16px;
     cursor:pointer
    }
    .popup_tab__item--current {
     color:#22d59c;
     cursor:default
    }
    .popup_login_qq {
     margin-top:-48px
    }
    .wechat_login_tips {
     position:absolute;
     left:0;
     bottom:100px;
     width:100%;
     text-align:center;
     font-size:12px;
     color:rgba(0,0,0,.5)
    }
    .icon_qq {
     background-position:0 -60px
    }
    .icon_firefox {
     background-position:0 -120px
    }
    .icon_ie {
     background-position:0 -180px
    }
    .popup__bd__browser {
     padding:0 40px 28px
    }
    .popup__bd__browser .popup__subtit {
     text-align:center;
    }
    
    .icon_chrome,
    .icon_firefox,
    .icon_ie,
    .icon_qq {
     display:block;
     margin:0 auto;
     width:60px;
     height:60px;
     background:url(https://y.qq.com/artists/js/img/browser_99e4e86.jpg?max_age=25920000) no-repeat 0 0
    }
    .icon_qq {
     background-position:0 -60px
    }
    .icon_firefox {
     background-position:0 -120px
    }
    .icon_ie {
     background-position:0 -180px
    }
    .popup__bd__browser {
     padding:0 40px 28px
    }
    .popup__bd__browser .popup__subtit {
     text-align:center
    }
    .popup__bd__browser .popup__subtit {
        text-align: center;
    }
    .browser {
        overflow: hidden;
        padding: 30px 0;
        text-align: center;
        font-size: 0;
    }
    .browser__item {
        display: inline-block;
        margin: 0 15px;
        min-width: 90px;
        text-align: center;
        font-size: 14px;
    }
    .browser__item {
        text-align: center;
        font-size: 14px;
    }.browser__item {
        display: inline-block;
        margin: 0 15px;
        min-width: 90px;
        text-align: center;
        font-size: 14px;
    }
    .browser__item a{
    text-decoration: none;
    color: #1a1a1a;
    }
    
    .browser__item a:hover {
     color:#22d59c;
     border-color:#22d59c
    }
    .c_btn_normal:active {
     color:#23c28f;
     border-color:#23c28f
    }
    </style>
    </head>
    <body style="background-color:black;">
    
    </body>
    
    <script>
            var explorer = window.navigator.userAgent;
            explorer = explorer.toUpperCase();
            if (!window.FileReader || explorer.indexOf('CHROME') < 0 && explorer.indexOf('SAFARI') < 0) {
                document.body.innerHTML = '<div class="mod_popup popup_browser" data-aria="popup"><div class="popup__mask"></div><div class="popup__box">            <div class="popup__hd"><h2 class="popup__tit">OKMG温馨提示</h2></div><div class="popup__bd"><div class="popup__bd_inner popup__bd__browser"><h3 class="popup__subtit">为保证您更好的使用本系统,推荐使用以下浏览器访问。</h3><div class="browser"><p class="browser__item"><a target="_blank" href="https://pc.qq.com/detail/1/detail_2661.html"><i class="icon_chrome"></i>Chrome浏览器</a></p><p class="browser__item"><a target="_blank" href="https://browser.qq.com/?adtag=SEM170314011"><i class="icon_qq"></i>QQ浏览器</a></p></div></div></div></div></div>';
            }</script>
    		</html>

    发表评论

    免责声明 芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:925296647
    开通VIP 享更多特权,建议使用 QQ 登录