当一个页面对应有多个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); ???????}
导入不用的css文件及在不同设备显示不用的html页面
原文地址:http://www.cnblogs.com/stella1024/p/7591996.html