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

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

昨天,发布了《完美实现移动主题在360网站卫士缓存全开情况下的切换》一文,通过JS实现了主题在移动端访问时的自动切换,最后提到了可以在电脑版和移动版的footer里面加上手动切换链接,实现手动版本切换功能。 今早发现,电脑版切换到移动版是没问题了,但是移动版切换到电脑版,JS将会再次工作uaredirect.js会再次做UA判断,然后由又跳回了电脑版! 也就是说,手机上浏览无法手动切换到电脑版,看来还得继续折腾! 于是,想到一个办法,给移动版的切换链接带上一个参数,再修改 uaredirect.js,当发现链接后面带了指定参数时,就直接return,而不再进行UA判断,避免再次跳转的尴尬。。。 说干就干,在oschina找到如下2中获取url后面参数的方法: 根据个人喜好,张戈选择了第二种,然后如下修改uaredirect.js 最后,在移动版主题的footer里面加上如下代码: Ps:代码中加入登陆链接的原因,是因为WordPress Mobile Pack插件会强制转换后台样式,很不和谐!所以改成了登陆到PC版后台的链接,若手机主题已存在登陆链接的,删除替换即可。 最终,解决了移动版无法切换到电脑版的BUG~!   最新补充:突然发现了uaredirect.js中其实已经自带了中断机制:#fromapp  所以,只要在切换链接后面加上 #fromapp 就可以避免js跳转到移动版了! 冏。。。那上面的内容都是白忙活了,仅供参考,仅供参考。。。。 如果,你想换成其他中断参数,可以修改百度提供的uaredirect.js,将代码中的fromapp 改成你要的标识即可,比如张戈就修改成了pc,所以在手机上只要访问 https://zhang.ge#pc 就可以正常切换到电脑版了! 那么,文章最后那一大段footer代码,也可以将里面的?type=pc改成自定义的中断参数了,比如 #pc,自己看着办~
阅读全文
网站建设

完美实现移动主题在360网站卫士缓存全开情况下的切换

360网站卫士缓存全开之后的优劣分析: 缓存全开有什么好处? ①、速度达到飞一般的感觉; ②、节约空间大量流量,因为访问调用的是360CDN缓存镜像 ③、可抛弃本地相关插件:比如wp-super-cache等缓存插件、七牛CDN插件等 缓存全开之后,会有什么弊端: ①、主题切换失效(仅针对非响应式主题);→本文重点解决对象 ②、前台登录功能失效(可使用wp-admin路径登录); ③、原生评论可能会出问题(用多说就没影响); ④、补充:移动端无法切换到电脑版(此问题已解决,详见及相关文章=>) ⑤、补充:浏览计数无法排除已登录用户的访问,如wp-postviews; ⑥、其他张戈可能尚未发现的问题,欢迎反馈! 方法由来: 当张戈把主题调度插件:Any Mobile Theme Switcher 卸载之后,想起了百度的移动建站siteapp,于是前往http://siteapp.baidu.com 开始尝试siteapp制作移动站,在提交审核之后,在域名部署里面发现了新大陆: 终于让我找到了JS判断UA并切换主题的方法(之前找到方法的好像用的都不太顺...)! 只要将百度提供的切换代码根据实际情况修改了下,再结合另一款支持二级域名的主题调度插件,终于完美实现了JS切换移动主题! 终于,非响应式网站也可以酣畅淋漓地使用360网站卫士的全部缓存功能了!同时,也绝对兼容任何本地静态缓存插件,比如完全静态缓存插件cos-cache-html、偶尔主题切换抽风的wp-super-cache和Hpyer Cache等! 实现方法: 一、新增移动站二级域名 如何新增二级域名,请自查方法,张戈在此仅提供DA面板的设置方法: ①、打开你的DA控制面板,找到如下高级设置,并选择域名额外绑定(DA版本不一样,可能位置有所区别): ②、点击打开“域名额外绑定”,如下图增加自定义二级域名,作为移动访问站点: ③、前往域名DNS管理那给二级域名新增A记录: Ps:利用此方法制作移动站,仅需要一个插件和一个二级域名足矣,而不需要另外一份网站文件,强烈推荐! 接下来,在坐等二级域名生效的同时,咱们继续往下操作。 二、安装WordPress Mobile Pack ①、首先请安装支持二级域名的主题调度插件:WordPress Mobile Pack。 可以后台搜索安装英文原版,或者下载张戈DIY之后的汉化精简版: Ps:张戈将插件汉化之后,又精简了大部分功能,比如:删除了插件自带的4款移动主题、访问统计以及侧边栏等功能(具体请自行对比),仅剩下了主题切换功能,不喜勿下~~~ ②、插件设置 请如下图设置插件:(若还没有手机主题,请先准备一套手机主题,找不到的可以参考张戈博客相关文章) 三、添加UA判断JS代码 因为是静态缓存,所以只有JS判断才能在静态页面下继续工作!下面继续~ ①、在function.php中新增函数,用于生成当前页面的链接: 编辑function.php,找个位置新增以下代码(怕放错就直接放到最后一个 ?> 的前面): ②、编辑主题头部模板:header.php,在<head>后面加上如下代码: 做完这些操作之后,现在你可以试试效果了: 先清除所有静态缓存和手机浏览器缓存,然后用手机访问网站,比如https://zhang.ge,观察是否会跳转到http://m.zhang.ge,并且展示的是移动样式! 四、添加手动切换功能 切换正常后,你还可以依葫芦画瓢,在移动主题的footer.php加上手动切换链接,详见张戈博客底部! 具体做法:将以下代码添加到移动版主题目录下的footer.php相应位置即可。 Ps:电脑版切换到移动版,以及PC端用户访问移动版自动跳到电脑版的方法,请自行依葫芦画瓢添加代码,张戈就不赘述了(实在不懂的可以参考张戈博客的PC和移动页面的源代码)。 全部完成之后,你就可以开启360网站卫士的全部静态缓存功能了: Ps:记得移动二级域名同样设置下整站缓存,移动端开启速度快到无法想象! 而且可以发现,上图的三项缓存功能并没有缓存到单页面和分类页面,于是你可以下拉,如下图添加强行缓存地址: 设置后,一分钟左右就会生效!用手机访问将直接跳至移动站,完美实现了在静态缓存的情况下的站点切换! 另外,非响应式网站使用【本地静态缓存插件】也不再纠结偶尔PC机访问网站出现手机页面的尴尬事儿! 这就是JS判断UA的天然优势!静态页面下依然坚挺有效! 本文方法理论上同样适用于其他支持整站静态缓存的CDN,比如百度加速乐,有兴趣的朋友可以试试看! 本文部分代码和插件仅支持WordPress,其他建站程序请参考解决思路,自行折腾吧~
阅读全文