<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            BOM
                浏览器对象模型
                BOM可以使我们通过JS来操作浏览器
                在BOM中为我们提供了一组对象,用来完成浏览器的操作
                BOM对象
                    -Window
                        代表的是整个浏览器的窗口,同时Window也是网页中的全局对象
                    -Navigator
                        代表的是当前浏览器的信息,通过该对象可以识别不同的浏览器
                    -Location
                        代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器的跳转页面
                    -History
                        代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
                            由于隐私的原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
                            而且该操作只在当次访问时有效
                    -Screen
                        代表用户的屏幕信息,通过该对象可以获取到用户的显示器的相关信息

                    这些BOM对象在浏览器中都是作为window对象的属性来保存的
                        可以通过window对象来适应,也可以直接使用
         */
        /*
        Navigator
            -代表的是当前浏览器的信息,通过该对象可以识别不同的浏览器
            -由于历史原因, Navigator对象中的大部分属性已经不能帮我们识别浏览器了
            -一般我们只会使用userAgent来判断浏览器的信息
                userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容
                不同的浏览器会有不同的userAgent
         */
        console.log(navigator.userAgent);
        /*
            如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
         */
    </script>
</head>
<body>

</body>
</html>

History

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            History
                -对象可以用来操作浏览器向前或向后翻页
         */
        /*
            length
                -属性,可以获取到当次访问的链接数量
         */
        //alert(history.length);
        window.onload=function (){
            //获取按钮对象
            var btn=document.getElementById("btn");
            btn.onclick=function (){
               /*
                    back()
                        -可以用来回退到上一个页面,作用和浏览器的回退按钮一样
                */
                //history.back();
                /*
                    forward()
                        -可以跳转到下一个页面,作用和浏览器的前进按钮一样
                 */
                //history.forward();
                /*
                    go()
                        -可以跳转到指定页面,需要一个整数作为参数
                 */
                history.go();
            }
        }
    </script>
</head>
<body>
<button>点我一下</button>
<h1>History</h1>
</body>
</html>

Location

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            Location
                -该对象中封装了浏览器的地址栏的信息
         */

        window.onload=function (){
            //获取按钮对象
            var btn=document.getElementById("btn");
            btn.onclick=function (){
                //如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
                /*
                    如果直接将location属性修改为一个完整的路径,或相对路径,
                        则我们的页面会自动跳转到该路径,并且会生成相应的历史记录
                 */
                /*
                    assign()
                        用来跳转到其他页面,作用和直接修改location一样
                 */
                /*
                    reload()
                        用来重新加载当前页面,作用和刷新按钮一样
                        如果在方法中传递一个true作为参数,则会强制清空缓存刷新页面
                 */
                /*
                    replace()
                        可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
                            不会生成历史记录,也不能回退
                 */
                location="http://www.baidu.com";

            }
        }
    </script>
</head>
<body>
<button id="btn">点我一下</button>
<h1>Location</h1>
</body>
</html>

Q.E.D.