• 浏览器内核及浏览器对象


      一、浏览器内核

      浏览器内核可以分为两个部分,1、渲染引擎(Rendering Engine):他负责取得网页的内容,图像HTML等,然后整理信息如获得CSS等,最后计算网页的显示方式,最后显示在显示屏上。2、JS引擎:解析javascript语言,实现javascript对网页的动态效果。浏览器内核额度不同对于网页的语法解释也会不同,渲染的结果也会不同。

    浏览器目前主流的有五大浏览器,他们的内核对应如下:

    1、IE浏览器:Trident内核,俗称IE内核。
    2、Chrome浏览器:以前是webkit内核,现在是Blink内核。
    3、Firefox内核:Gecko内核。
    4、Safari内核:webkit内核。
    5、Opera内核:从webkit内核到blink内核。

      二、浏览器对象

      浏览器对象有window对象、navigator对象、screen对象、location对象、history对象、document对象。

      window对象是浏览器窗口对象,有全局作用域的作用,所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性,全局函数是 window 对象的方法。

      window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后,用于显示网页的净宽高。还有一个outerWidthouterHeight属性,可以获取浏览器窗口的整个宽高。

    console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
    console.log('window outer size:'+window.outerWidth+'x'+window.outerHeight);

    结果为:

      window inner size: 809 x 673
      window outer size:1366 x 768

      navigator对象表示浏览器的信息,常用的属性包括

    navigator.appName:浏览器名称;
    navigator.appVersion:浏览器版本;
    navigator.language:浏览器设置的语言;
    navigator.platform:操作系统类型;
    navigator.userAgent:浏览器设定的User-Agent字符串。
    console.log(navigator.appName);   //Netscape
    console.log(navigator.appVersion);  //5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
    console.log(navigator.language);  //zh-CN
    console.log(navigator.platform);   //Win32
    console.log(navigator.userAgent);  //Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

      navigator的信息可以很容易地被用户修改,所以JavaScript读取的值不一定是正确的。

      screen对象表示屏幕信息,常用的属性有:

    • screen.width:屏幕宽度,以像素为单位;
    • screen.height:屏幕高度,以像素为单位;
    • screen.colorDepth:返回颜色位数,如8、16、24
    console.log(screen.height);   //768
    console.log(screen.width);   //1366
    console.log(screen.colorDepth);  //24

      location对象表示当前页面的url信息。location.href可以获取一个完整的当前页面的url。如:http://www.example.com:8080/path/index.html?a=1&b=2#TOP

    对这个url进行分解获取。

    location.protocol; // 'http'
    location.host; // 'www.example.com'
    location.port; // '8080'
    location.pathname; // '/path/index.html'
    location.search; // '?a=1&b=2'
    location.hash; // 'TOP'

    location对象有三个方法:

      assign():加载新的文档

      reload():重新加载当前文档。

      replace():用新的文档替换当前文档。

      history对象表示浏览器的历史纪录,实现浏览器前进与后退相似导航的功能。

      back():表示后退一个页面。

      forward():表示前进一个页面。

  • 相关阅读:
    IDEA 删除java类的3种提示
    IDEA类和方法注释模板设置(非常详细)
    IntelliJ IDEA 2019,从入门到疯狂,图文教程
    intellij idea 如何将普通项目转换为maven项目
    使用idea误点 Add as Ant Build File选项后
    idea使用"svn"到项目报错Error:Cannot run program "svn" (in directory "E:XXXXXX"):CreateProcess error=2,
    Alertmanager 部署配置
    Prometheus PromQL 简单用法
    Prometheus PromQL 基础
    Prometheus 自动发现
  • 原文地址:https://www.cnblogs.com/tutuj/p/11011300.html
Copyright © 2020-2023  润新知