js获取url中?后的参数,修复移动版无法切换到电脑版的BUG

时间:2022-05-05
本文章向大家介绍js获取url中?后的参数,修复移动版无法切换到电脑版的BUG,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

昨天,发布了《完美实现移动主题在 360 网站卫士缓存全开情况下的切换》一文,通过 JS 实现了主题在移动端访问时的自动切换,最后提到了可以在电脑版和移动版的 footer 里面加上手动切换链接,实现手动版本切换功能。

今早发现,电脑版切换到移动版是没问题了,但是移动版切换到电脑版,JS 将会再次工作uaredirect.js会再次做 UA 判断,然后由又跳回了电脑版! 也就是说,手机上浏览无法手动切换到电脑版,看来还得继续折腾!

于是,想到一个办法,给移动版的切换链接带上一个参数,再修改 uaredirect.js,当发现链接后面带了指定参数时,就直接 return,而不再进行 UA 判断,避免再次跳转的尴尬。。。

说干就干,在 oschina 找到如下 2 中获取 url 后面参数的方法:

//获取请求url中参数的值:
/*方法一:参数值中没有等于号(“=”)*/
        function getUrlRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                if (str.indexOf("&") != -1) {
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                } else {
                    theRequest[str.split("=")[0]] = unescape(str.split("=")[1]);
                }
            }
            return theRequest;
        }
/*方法二:参数值中有等于号的情况(“=”)*/
        function getUrlRequest(){
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    if (str.indexOf("&") != -1) {
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    } else {
                        var key = str.substring(0,str.indexOf("="));
                        var value = str.substr(str.indexOf("=")+1);
                        theRequest[key] = decodeURI(value);
                    }
                }
                return theRequest;
        }

根据个人喜好,张戈选择了第二种,然后如下修改uaredirect.js

//获取url后面参数
function getUrlRequest(){
                 var url = location.search;
                 var theRequest = new Object();
                 if (url.indexOf("?") != -1) {
                     var str = url.substr(1);
                     if (str.indexOf("&") != -1) {
                         strs = str.split("&");
                         for (var i = 0; i < strs.length; i++) {
                             theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                         }
                     } else {
                         var key = str.substring(0,str.indexOf("="));
                         var value = str.substr(str.indexOf("=")+1);
                         theRequest[key] = decodeURI(value);
                     }
                 }
                 return theRequest;
         }
function uaredirect(f) {
     var canshu=getUrlRequest();
    try {
        if (canshu["type"] == "pc") { //当检测到url后面带了type=pc参数时,停止执行.
            return
        }
        var b = false;
        if (arguments[1]) {
            var e = window.location.host;
            var a = window.location.href;
            if (isSubdomain(arguments[1], e) == 1) {
                f = f + "/#m/" + a;
                b = true
            } else {
                if (isSubdomain(arguments[1], e) == 2) {
                    f = f + "/#m/" + a;
                    b = true
                } else {
                    f = a;
                    b = false
                }
            }
        } else {
            b = true
        }
        if (b) {
            var c = window.location.hash;
            if (!c.match("fromapp")) {
                if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))) {
                    location.replace(f)
                }
            }
        }
    } catch(d) {}
}
function isSubdomain(c, d) {
    this.getdomain = function(f) {
        var e = f.indexOf("://");
        if (e > 0) {
            var h = f.substr(e + 3)
        } else {
            var h = f
        }
        var g = /^www./;
        if (g.test(h)) {
            h = h.substr(4)
        }
        return h
    };
    if (c == d) {
        return 1
    } else {
        var c = this.getdomain(c);
        var b = this.getdomain(d);
        if (c == b) {
            return 1
        } else {
            c = c.replace(".", "\.");
            var a = new RegExp("\." + c + "$");
            if (b.match(a)) {
                return 2
            } else {
                return 0
            }
        }
    }
};​

最后,在移动版主题的 footer 里面加上如下代码:

<!--登陆-->
<a title="登陆" href="http://zhangge.net/wp-login.php">登陆</a>&nbsp;
<!--首页底部切换链接-->
<?php wp_reset_query();if ( is_home()){ ?>
<a title="电脑版" href="http://zhangge.net?type=pc">电脑版</a>
<?php } ?>
<!--文章底部切换链接-->
<?php wp_reset_query();if ( is_single()){ ?>
<a title="电脑版" href="http://zhangge.net/<?php the_ID(); ?>.html?type=pc">电脑版</a>
<?php } ?>
<!--分类页底部切换链接-->
<?php wp_reset_query();if ( is_category()){ ?>
<a title="电脑版" href="http://zhangge.net/<?php echo the_category_slug(); ?>?type=pc">电脑版</a>
<?php } ?>
<!--页面底部切换链接-->
<?php if ( is_page()){ ?>
<a title="电脑版" href="http://zhangge.net/<?php echo the_slug(); ?>?type=pc">电脑版</a>

Ps:代码中加入登陆链接的原因,是因为WordPress Mobile Pack插件会强制转换后台样式,很不和谐!所以改成了登陆到 PC 版后台的链接,若手机主题已存在登陆链接的,删除替换即可。

最终,解决了移动版无法切换到电脑版的 BUG~!

最新补充:突然发现了uaredirect.js中其实已经自带了中断机制:#fromapp 

所以,只要在切换链接后面加上 #fromapp 就可以避免 js 跳转到移动版了!

冏。。。那上面的内容都是白忙活了,仅供参考,仅供参考。。。。

如果,你想换成其他中断参数,可以修改百度提供的uaredirect.js,将代码中的 fromapp 改成你要的标识即可,比如张戈就修改成了 pc,所以在手机上只要访问 http://zhangge.net#pc 就可以正常切换到电脑版了!

那么,文章最后那一大段 footer 代码,也可以将里面的?type=pc改成自定义的中断参数了,比如 #pc,自己看着办~