码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-25 16:10:17      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:match   bst   根据   cat   dex   ==   console   protocol   tail   

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

标签:match   bst   根据   cat   dex   ==   console   protocol   tail   

原文地址:http://www.cnblogs.com/stella1024/p/7591996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!