【前端 CDN】CDN缓存造成的bug，JS识别移动端设备和PC端设备，域名重定向

<!-- index.html --> <!DOCTYPE html> <html lang="zh" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" id="setscale" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> ... <script type="text/javascript"> let type; // 判断用户是哪种设备 if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { type = "mobile" } else { type = "pc" } // 若不是mobile设备，重定向到pc if(type != 'mobile') window.location.replace(window.location.origin + "/ index"); </script> <link href="build/main.css?v=5.5" rel="stylesheet"> </head> <body> ... </body> </html>

将 pc 端和 mobile 端的域名进行拆分，将顶级域名 testUrl.com 和主域名 www.testUrl.com 指向 pc 项目，将子域名 m.testUrl.com 指向 mobile 项目。用户通过不同的域名访问项目。

由于CDN缓存是根据访问路径缓存的，当区分开 pc 端项目路径和 mobile 端项目路径后，用户访问的文件就不会在混乱了。

三、遗留问题处理

使用 2.2 中的办法解决了用户访问的问题，但是如果用户不重新下载APP，或是直接在 web 上访问旧线路，就依旧会报错。如何引导用户正常使用线路？

3.1.1 判断当前是 pc 端还是 mobile 端

var myBrowser = { versions: function () { var u = navigator.userAgent; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部 wx: u.indexOf('MicroMessenger') > -1,//是否是微信 hasVersion: u.indexOf('Version') > -1, isie: navigator.userAgent.toLowerCase().indexOf(".net") > 0 || navigator.userAgent.toLowerCase().indexOf("msie") > 0, isie6: navigator.userAgent.toLowerCase().indexOf("msie 6.0") > 0, isie7: navigator.userAgent.toLowerCase().indexOf("msie 7.0") > 0, isie8: navigator.userAgent.toLowerCase().indexOf("msie 8.0") > 0, isie9: navigator.userAgent.toLowerCase().indexOf("msie 9.0") > 0, ischrome: navigator.userAgent.toLowerCase().indexOf("chrome") > 0 && navigator.userAgent.toLowerCase().indexOf("safari") > 0, issafari: navigator.userAgent.toLowerCase().indexOf("chrome") < 0 && navigator.userAgent.toLowerCase().indexOf("safari") > 0, isfirefox: navigator.userAgent.toLowerCase().indexOf("firefox") > 0 }; } ()

3.2.2 跳转错误则弹出提示，修改域名，并进行重定向

if(myBrowser.versions.mobile) { var jumpUrl = window.location.origin; var alertContent = '<div class="pcAlertWrap"><div class="pcAlert"><p class="pcAlertText">请下载最新版本</p><div class="btnWrap"><div class="closeBtn">确定</div></div></div>' var isApp = false; // 若window.android_Web不是undefined，则是在安卓的web浏览器中 if((myBrowser.versions.android && window.android_Web != undefined)) { isApp = true; } else if(myBrowser.versions.ios) { try { isApp = true; window.webkit.messageHandlers.testAAApp.postMessage('') } catch (error) { isApp = false; } } if(isApp) { // 若在app中，则提示下载最新版本 alertContent = `<div class="pcAlertWrap"><div class="pcAlert"><p class="pcAlertText">请下载最新版本<div class="btnWrap"><div class="sureBtn">确定</div></div></div>` } else { // 若在web中，则重定向到m.的网址去 // 若是主域名 if(jumpUrl.indexOf('://www') > 0) { jumpUrl = jumpUrl.replace('://www', '://m') } // 若已经是移动端的二级域名，则无需操作 else if(jumpUrl.indexOf('://m.') > 0){ } else { // 若是顶级域名，则插入m. jumpUrl = jumpUrl.replace('://', '://m.') } alertContent = `<div class="pcAlertWrap"><div class="pcAlert"><p class="pcAlertText">请使用 <a href="${jumpUrl}">${jumpUrl}</a> 访问获得更佳体验</p><div class="btnWrap"><div class="sureBtn">确定</div></div></div>` } window.onload = function() { $('body').append(alertContent); $('.pcAlertWrap').addClass('active'); $('.closeBtn').on('click',function(){ $('.pcAlertWrap').removeClass('active'); }) $('.sureBtn').on('click',function(){ $('.pcAlertWrap').removeClass('active'); window.location.replace(jumpUrl) }) } }

3.3.3 css 样式

<style> .pcAlertWrap{ position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; justify-content: center; z-index: 99999; display: none; } .pcAlertWrap.active{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .pcAlert{ position: relative; width: 300px; min-height: 150px; background: #fff; padding: 10px; font-size: 14px; border-radius: 5px; z-index: 1; } .pcAlertText{ margin-top: 10px; text-align: center; } .btnWrap{ position: absolute; width: 100%; right: 0; bottom: 10px; text-align: center; color: #fff; font-size: 14px; z-index: 999; } .closeBtn,.sureBtn{ display: inline-block; margin: 0 10px; width: 70px; height:30px; line-height: 30px; background: #0000FF; border-radius: 4px; } </style>

原文链接：https://blog.csdn.net/qq_34416331/article/details/103870441?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918740216781818734990%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918740216781818734990&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-6-103870441-null-null.nonecase&utm_term=cdnfly

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5014

【前端 CDN】CDN缓存造成的bug，JS识别移动端设备和PC端设备，域名重定向

一、项目问题和原因

二、解决方案

三、遗留问题处理

相关推荐

发表回复