1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8. <button onclick="func1()">查看Location对象</button>
    9. <button onclick="func2()">跳转到百度</button>
    10. <button onclick="func3()">F5</button>
    11. <script>
    12.     function func1(){
    13.         console.log( location );
    14.     }
    15.     // 地址栏对象控制和操作地址栏
    16.     // 所谓的地址就是当前页面所在地址
    17.     // 地址结构:
    18.     // 协议://域名:端口/路径/文件名?查询字符串#锚点
    19.     console.log( `协议=>${location.protocol}` );
    20.     console.log( `端口=>${location.port}` );
    21.     console.log( `域名=>${location.hostname}` );
    22.     console.log( `域名:端口=>${location.host}` );
    23.     console.log( `路径=>${location.pathname}` );
    24.     console.log( `查询字符串=>${location.search}` );
    25.     console.log(`完整的地址信息=>${location.href}`);
    27.     function func2(){
    28.         // location.href="http://www.baidu.com"; // 页面跳转
    29.         location.assign("http://www.baidu.com"); // 页面跳转
    30.     }
    32.     function func3(){
    33.         location.reload(); // 刷新页面
    34.     }
    35. </script>
    36. </body>
    37. </html>