zoukankan      html  css  js  c++  java
  • 浏览器。浏览器对象检测、Chrome调试工具


    chrome浏览器的flash问题:  2017-12-26  chrome浏览器的flash有无法显示无法正常运行的问题时,解决方法如下:

    https://qzonestyle.gtimg.cn/qzone/photo/v7/js/module/flashDetector/flash_tutorial.pdf  flash开启指引

    chrome://settings/content/flash  flash设置


    浏览器对象检测

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    
    //javascript获取浏览器内核、版本函数
    Browser = {
        version: "",//版本
        core: "",//内核
        userAgent: "",//userAgent
        init: function() {//初始化(遍历img,取出图片url,发ajax请求)
            
            var ua = navigator.userAgent.toLowerCase();
            var s;
            var name ='';
            var ver = 0;
            Browser.userAgent=ua;
    
            //探测浏览器
            (s = ua.match(/msie ([d.]+)/)) ? Browser._set("ie", Browser._setVersion(s[1])):
            (s = ua.match(/firefox/([d.]+)/)) ? Browser._set("firefox", Browser._setVersion(s[1])) :
            (s = ua.match(/chrome/([d.]+)/)) ? Browser._set("chrome", Browser._setVersion(s[1])) :
            (s = ua.match(/opera.([d.]+)/)) ? Browser._set("opera", Browser._setVersion(s[1])) :
            (s = ua.match(/version/([d.]+).*safari/)) ? Browser._set("safari", Browser._setVersion(s[1])) : 0;
    
        },
        _setVersion: function(ver,floatLength) {
            ver = ('' + ver).replace(/_/g, '.');
            floatLength = floatLength || 1;
            ver = String(ver).split('.');
            ver = ver[0] + '.' + (ver[1] || '0');
            ver = Number(ver).toFixed(floatLength);
            return ver;
        },
        _set: function(bname,bver) {
            Browser.core=bname;
            Browser.version=bver;
        }
    };
    
    
    
    </script>
    </head>
    <body>
    <h1>检测浏览器版本</h1>
    
    
    <div style="display:inline-block;border:1px solid #f90;background:#ffc;padding:10px 20px;">
    <script type="text/javascript">
    Browser.init();
    document.write("<br><b>内核</b>    "+Browser.core);//浏览器内核。
    document.write("<br><b>版本</b>    "+Browser.version);//浏览器版本。
    document.write("<br><b>userAgent</b>    "+Browser.userAgent);//浏览器信息。
    </script>
    </div>
    
    
    
    
    
    
    
    <style type="text/css">
    body,div,p{font-size:14px;}
    .red{color:red;}
    b{font-style:bold;font-size:18px;color:#00f;margin-right:30px;}
    h1{background:#adf;border:1px solid #09f;padding-left:20px;}
    </style>
    <h1>Screen 对象属性</h1>
    
    <script type="text/javascript">
    document.write("<p><b>availWidth</b>    返回显示屏幕的宽度 (除 Windows 任务栏之外):  <span class='red'>" + screen.availWidth + " </span></p>");
    document.write("<p><b>availHeight</b>    返回显示屏幕的高度 (除 Windows 任务栏之外):  <span class='red'>" + screen.availHeight + " </span></p>");
    document.write("<p><b>bufferDepth</b>    设置或返回调色板的比特深度:  <span class='red'>" + screen.bufferDepth + " </span></p>");
    document.write("<p><b>colorDepth</b>    返回目标设备或缓冲器上的调色板的比特深度:  <span class='red'>" + screen.colorDepth + " </span></p>");
    document.write("<p><b>deviceXDPI</b>    返回显示屏幕的每英寸水平点数:  <span class='red'>" + screen.deviceXDPI + " </span></p>");
    document.write("<p><b>deviceYDPI</b>    返回显示屏幕的每英寸垂直点数:  <span class='red'>" + screen.deviceYDPI + " </span></p>");
    document.write("<p><b>fontSmoothingEnabled</b>    返回用户是否在显示控制面板中启用了字体平滑:  <span class='red'>" + screen.fontSmoothingEnabled + " </span></p>");
    document.write("<p><b>height</b>    返回显示屏幕的高度:  <span class='red'>" + screen.height + " </span></p>");
    document.write("<p><b>logicalXDPI</b>    返回显示屏幕每英寸的水平方向的常规点数:  <span class='red'>" + screen.logicalXDPI + " </span></p>");
    document.write("<p><b>logicalYDPI</b>    返回显示屏幕每英寸的垂直方向的常规点数:  <span class='red'>" + screen.logicalYDPI + " </span></p>");
    document.write("<p><b>pixelDepth</b>    返回显示屏幕的颜色分辨率(比特每像素):  <span class='red'>" + screen.pixelDepth + " </span></p>");
    document.write("<p><b>updateInterval</b>    设置或返回屏幕的刷新率:  <span class='red'>" + screen.updateInterval + " </span></p>");
    document.write("<p><b>width</b>    返回显示器屏幕的宽度:  <span class='red'>" + screen.width + " </span></p>");
    </script>
    
    <h1>Navigator 对象属性</h1>
    <script type="text/javascript">
    document.write("<p><b>appCodeName</b>    返回浏览器的代码名:  <span class='red'>" + navigator.appCodeName + " </span></p>");
    document.write("<p><b>appMinorVersion</b>    返回浏览器的次级版本:  <span class='red'>" + navigator.appMinorVersion + " </span></p>");
    document.write("<p><b>appName</b>    返回浏览器的名称:  <span class='red'>" + navigator.appName + " </span></p>");
    document.write("<p><b>appVersion</b>    返回浏览器的平台和版本信息:  <span class='red'>" + navigator.appVersion + " </span></p>");
    document.write("<p><b>browserLanguage</b>    返回当前浏览器的语言:  <span class='red'>" + navigator.browserLanguage + " </span></p>");
    document.write("<p><b>cookieEnabled</b>    返回指明浏览器中是否启用 cookie 的布尔值:  <span class='red'>" + navigator.cookieEnabled + " </span></p>");
    document.write("<p><b>cpuClass</b>    返回浏览器系统的 CPU 等级:  <span class='red'>" + navigator.cpuClass + " </span></p>");
    document.write("<p><b>onLine</b>    返回指明系统是否处于脱机模式的布尔值:  <span class='red'>" + navigator.onLine + " </span></p>");
    document.write("<p><b>platform</b>    返回运行浏览器的操作系统平台:  <span class='red'>" + navigator.platform + " </span></p>");
    document.write("<p><b>systemLanguage</b>    返回 OS 使用的默认语言:  <span class='red'>" + navigator.systemLanguage + " </span></p>");
    document.write("<p><b>userAgent</b>    返回由客户机发送服务器的 user-agent 头部的值:  <span class='red'>" + navigator.userAgent + " </span></p>");
    document.write("<p><b>userLanguage</b>    返回 OS 的自然语言设置:  <span class='red'>" + navigator.userLanguage + " </span></p>");
    </script>
    
    
    
    <h1>location 对象属性</h1>
    <script type="text/javascript">
    document.write("<p><b>hash</b>    设置或返回从井号 (#) 开始的 URL(锚):  <span class='red'>" + location.hash + " </span></p>");
    document.write("<p><b>host</b>    设置或返回主机名和当前 URL 的端口号:  <span class='red'>" + location.host + " </span></p>");
    document.write("<p><b>hostname</b>    设置或返回当前 URL 的主机名:  <span class='red'>" + location.hostname + " </span></p>");
    document.write("<p><b>href</b>    设置或返回完整的 URL:  <span class='red'>" + location.href + " </span></p>");
    document.write("<p><b>pathname</b>    设置或返回当前 URL 的路径部分:  <span class='red'>" + location.pathname + " </span></p>");
    document.write("<p><b>port</b>    设置或返回当前 URL 的端口号:  <span class='red'>" + location.port + " </span></p>");
    document.write("<p><b>protocol</b>    设置或返回当前 URL 的协议:  <span class='red'>" + location.protocol + " </span></p>");
    document.write("<p><b>search</b>    设置或返回从问号 (?) 开始的 URL(查询部分):  <span class='red'>" + location.search + " </span></p>");
    //document.write("<p><b>mmmmmmmmmm</b>    mmmmmmmmm:  <span class='red'>" + location.mmmmmmmm + " </span></p>");
    
    </script>
    
    </body>
    </html>

    Chrome 前端调试工具:

    Elements  元素

    Console  慰问

    Sources  来源

    找到js文件,打上断点后F5刷新页面。F8是断点,F10是跳到下一步。

    Network  网络

    Network——>Disable cache 禁用缓存

    Performance  性能

    Memory  记忆

    Application  应用

    Security  安全

    Audits  审核

  • 相关阅读:
    jquery实现“上一页、下一页及第一页”操作的无刷算法
    $ ssh -T git@github.com ssh: connect to host ssh.github.com port 22: Connection timed out
    git clone fatal: unable to access 'https://github.com/carlon/demo.git/': Failed to connect to github.com port 443: Timed out
    ESLint
    JS中的对象之原型
    JS中的Promise
    使用过Fetch之后,你还想使用AJAX吗
    Redux中的异步操作
    React全家桶之一 react-router之高级
    React 实践心得:react-redux 之 connect 方法详解
  • 原文地址:https://www.cnblogs.com/qq21270/p/3953493.html
Copyright © 2011-2022 走看看