当一个页面对应有多个css样式文件时,我们可以根据地址栏的参数值而导入不同的css文件:
function getCss() { var linkNode = document.createElement("link"); linkNode.setAttribute("rel","stylesheet"); linkNode.setAttribute("type","text/css"); if(GetQueryString(‘from‘)==‘lk‘){ linkNode.setAttribute("href","css/prod_details_lk.css"); console.log(111); }else{ //默认导入推客的css linkNode.setAttribute("href","css/prod_details_tk.css"); } document.head.appendChild(linkNode); }; function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; } getCss();
下面是来自I‘m QQ官网的js代码(https://im.qq.com/index.shtml),它随着浏览器设备的不同而打开对应的页面,从而实现响应式。
if(window.location.protocol==="http:"){ window.location.replace(‘https://im.qq.com/index.shtml‘); } var t0 = new Date(); var os = function() { var ua = navigator.userAgent, isWindowsPhone = /(?:Windows Phone)/.test(ua), isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone, isAndroid = /(?:Android)/.test(ua), isFireFox = /(?:Firefox)/.test(ua), isChrome = /(?:Chrome|CriOS)/.test(ua), isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)), isPhone = /(?:iPhone)/.test(ua) && !isTablet, isPc = !isPhone && !isAndroid && !isSymbian; return { isTablet: isTablet, isPhone: isPhone, isAndroid : isAndroid, isPc : isPc }; }(); var getSearch = function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substring(1).match(reg); if ( !! r) { return unescape(r[2]); } return null; }; var searchstr = window.location.search, hashstr = window.location.hash; var viewpc = getSearch("vpc"); if(!viewpc && (os.isAndroid || os.isPhone)){ location.replace(‘http://im.qq.com/immobile/index.html‘+searchstr+hashstr); }else if(os.isTablet){ location.replace(‘http://im.qq.com/qqhd/‘+searchstr+hashstr); }
时间: 2024-07-29 17:29:48