04.Location.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <script>
  9. /**
  10. * Location
  11. * -该对象中封装了浏览器的地址栏信息
  12. */
  13. window.onload = function () {
  14. //获取按钮对象
  15. var btn = document.getElementById('btn');
  16. btn.onclick = function () {
  17. //如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
  18. // alert(location);
  19. /**
  20. * 如果直接将location属性修改为一个完整的路径,或相对路径
  21. * 则我们页面会自动自动跳转到该路径,并且会生成相应的历史记录
  22. */
  23. // location = "http://www.baidu.com";//会直接打开百度网页
  24. // location = "02.BOM.html";
  25. /**
  26. * assign()
  27. * -用来跳转到其他的页面,作用和直接修改location一样
  28. */
  29. // location.assign("http://www.baidu.com");
  30. /**
  31. * reload()
  32. * -用于重新加载当前页面,作用和刷新按钮一样
  33. * -如果在方法中传递一个true作为参数,则会强制清空缓存并刷新页面
  34. */
  35. // location.reload();//不会清空缓存
  36. // location.reload(true);//会清空缓存
  37. /**
  38. * replace()
  39. * -可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
  40. * 不会生成历史记录,不能使用回退按钮回退
  41. */
  42. // location.replace("02.BOM.html");
  43. };
  44. };
  45. </script>
  46. </head>
  47. <body>
  48. <button id="btn">点一下</button>
  49. <h1>Location</h1>
  50. <input type="text"/>
  51. <a href="02.BOM.html">去BOM</a>
  52. </body>
  53. </html>