BOM 浏览器对象 Location History

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


   <h1>history</h1>

   <button></button>

  <script>
    /**
     *  BOM 
     *    浏览器对象
     *    BOM 可以使我们通过 js 来操作浏览器
     *    BOM 对象
     *    Window  
     *      代表的是整个浏览器 同时window 也是网页中的全局对象
     *    Navigator
     *      代表当前浏览器的信息 通过该对象可以来识别不同的浏览器
     *    Location
     *      代表当前浏览器的地址信息 通过location 可以获取地址栏信息 或者操作浏览器跳转页面
     *    History
     *      代表浏览器的历史记录 可以通过该对象来操作浏览器的历史记录  --> 只能操作浏览器向前或向后翻页
     *    Screen
     *      代表用户的屏幕信息 通过该对象可以获取到用户的显示器的相关信息
    */


   /**
    *    Navigator
     *      代表当前浏览器的信息 通过该对象可以来识别不同的浏览器
     *     一般只会 使用 userAgent 来判断浏览器的信息
     * 
     * userAgent   
     *  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
     */
    //  console.log(navigator);

    //  var ua = navigator.userAgent; 
    //  console.log(ua);

    //  if(/firefox/i.test(ua)){
    //     alert("火狐")
    //  } else if(/chrome/i.test(ua)){
    //     alert("chrome")
    //  } else if(/msie/i.test(ua)){
    //     alert("IE")
    //  }else if("ActiveXObject" in window){
    //    alert("IE-11")
    //  }

     /** userAgent 不能判断 ie 浏览器
      *  如果 userAgent 不能判断, 还可以通过一些浏览器中特有的对象 来判断浏览器的信息
      *  比如 ActivexObject
     */
    // if("ActiveXObject" in window){
    //   alert("IE-11")
    // }



   /**
    *    History
     *      代表浏览器的历史记录 可以通过该对象来操作浏览器的历史记录  --> 只能操作浏览器向前或向后翻页
     * 
     *      history.length 可以获取到当前访问的链接数量 
     *      history.back() 可以用来回退到上一个页面 作用和 浏览器的回退按钮一样
     *      history.forward() 可以跳转下一个页面 作用和 浏览器的前进按钮一样
     * 
     *      history.go()
     *          可以用来 跳转到指定页面
     *          它需要一个整数作为参数
     *              1 表示向前跳转一个页面 
     *              2 表示向前跳转两个页面
     *                -1 : 表示向后跳转一个页面
     *                -2 : 表示向后跳转两个页面
     * 
     **/

      //  alert(history.length)


    /**
      *    Location
     *      代表当前浏览器的地址信息 通过location 可以获取地址栏信息 或者操作浏览器跳转页面
     *      location.reload() 用于重新加载页面
     *      location.reload(true)  强制清空缓存 并刷新页面
     * **/
       
     console.log(location);
    //  location.reload()


  </script>

    
</body>
</html>
posted @ 2021-05-07 15:32  13522679763-任国强  阅读(47)  评论(0)    收藏  举报