• 导入不用的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);
            }
  • 相关阅读:
    JavaWeb图片显示与存储
    sql将日期按照年月分组并统计数量
    response的作用
    TCP/IP学习笔记(1)-----基本概念
    TCP/IP学习笔记(2)---数据链路层
    TCP/IP学习笔记(3)----IP,ARP,RARP协议
    TCP/IP学习笔记(4)------ICMP,ping,traceroute
    TCP/IP学习笔记(5)------IP选路
    如何运行简单的scrapy
    difference among String,StringBuilder,StringBuffer
  • 原文地址:https://www.cnblogs.com/stella1024/p/7591996.html
Copyright © 2020-2023  润新知