zoukankan      html  css  js  c++  java
  • 导入不用的css文件及在不同设备显示不用的html页面

    当一个页面对应有多个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);
            }
  • 相关阅读:
    动图+源码,演示 Java 中常用数据结构执行过程及原理
    16 个超级实用的 Java 工具类
    图解 Java 垃圾回收机制,写得非常好!
    一些值得收藏的开源框架
    JVM 发生内存溢出的 8 种原因、及解决办法
    VC的function类说明 -- 继续
    引用文章 如何在lambda中引入递归调用
    VC中function函数解析
    folly无锁队列正确性说明
    C++ Programming Language中的Calculator源代码
  • 原文地址:https://www.cnblogs.com/stella1024/p/7591996.html
Copyright © 2011-2022 走看看