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,自己看着办~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端生活

Linux(十五)进程管理

29280
来自专栏DeveWork

代码实现WordPress点击进入随机一篇文章的方法

在开始之前,你可以点击本站右侧“类Metro风格侧边栏”的中间那个图像,如果你够仔细的话,你会发现你的浏览器的地址栏里的url首先是 http://devewo...

391100
来自专栏SpringBoot 核心技术

第十四章:QueryDSL与SpringDataJPA共同服务于SpringBoot

49040
来自专栏xcywt

《Linux命令行与shell脚本编程大全》 第七章理解Linux文件权限

Linux沿用了Unix文件权限的方法,允许用户和组根据每个文件和目录的安全性设置来访问文件。 用户权限通过创建用户时分配的用户ID(UID)来跟踪的。每个用户...

24250
来自专栏Golang语言社区

【Golang语言社区】前端编程-手机端调试利器 - 总结与实践

一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以...

51340
来自专栏Ken的杂谈

Java快速入门教程 3、使用IntelliJ IDEA+Maven 创建、开发、管理项目

在 POM 中,groupId, artifactId, packaging, version 叫作 maven 坐标,它能唯一的确定一个项目。有了 maven...

71520
来自专栏云计算教程系列

如何在Ubuntu 16.04上使用uWSGI和Nginx为Django应用程序提供服务

Django是一个功能强大的Web框架,可以帮助您实现Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码,但是对于任何与生...

14900
来自专栏码农笔录

cordova打包vue2(webpack)android、ios app

47620
来自专栏重庆的技术分享区

MySQL在windows下的安装与配置

官网版本: https://dev.mysql.com/downloads/mysql/5.6.html#downloads

24040
来自专栏Linux运维学习之路

ansible批量管理软件部署及剧本

服务器版本信息: Centos6.9 [root@db02 ~]# uname -a Linux db02 2.6.32-696.el6.x86_64 #1 S...

1.1K70

扫码关注云+社区

领取腾讯云代金券