正文

导入不用的css文件及在不同设备显示不用的html页面

IP云
IP云V管理员/5 阅读
09/15
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

当一个页面对应有多个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);
}