• 中文
    • English
  • 注册
  • 查看作者
    • 12:JS关于BOM

      一. BOM

      BOM(Browser Object Model) 是指浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

      二.  UA

      UA意为浏览器标识,在JS中,可以使用navigator.userAgent;来获取当前浏览器的标识。

      <script type="text/javascript">
          var ua = navigator.userAgent;
          if(ua.indexOf("Chrome") != -1) {
              alert("谷歌浏览器");
          } else if(ua.indexOf("Firefox") != -1){
              alert("火狐浏览器");
          }
      </script>

      三.  history

      history用来保存历史记录浏览器历史,是BOM的内置对象,无需手动创建。history中包含用户在浏览器窗口中中访问过的 URL。History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

      1.  前进

      history.forward()

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>index.html</title>
      </head>
      <body>
      <a href="index2.html">跳转到2</a>
      <button onclick="history.forward()">前进</button>
      </body>
      </html>

      2.  后退

      history.back()

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>index2.html</title>
      </head>
      <body>
      <button onclick="history.back()">后退</button>
      <script type="text/javascript">
      </script>
      </body>
      </html>

      3. 具体的页面 

      可以使用history.go(number|URL)可加载历史列表中的某个具体的页面。go() 方法可加载历史列表中的某个具体的页面。比如history.go(-1)的效果等于history.back(),而和history.go(1)的效果等于history.forward(),history.go(number|URL)

      四.  Location

      Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <script type="text/javascript">
              window.onload = function () {
                  var btn1 = document.getElementById("btn1")
                  var btn2 = document.getElementById("btn2")
                  var btn3 = document.getElementById("btn3")
                  var btn4 = document.getElementById("btn4")
                  btn1.onclick = function() {
                      location="https://google.com";
                  }
                  btn2.onclick = function() {
                      //不会生成历史记录
                      location.replace("https://google.com")
                  }
                  btn3.onclick = function () {
                      //刷新页面
                      location.reload();
                  }
                  btn4.onclick = function () {
                      //获取当前网址
                      alert(location);
                  }
              }
          </script>
      </head>
      <body>
      <button id="btn1">跳转到谷歌</button>
      <button id="btn2">替换为谷歌</button>
      <button id="btn3">刷新</button>
      <button id="btn4">获取当前页面网址</button>
      </body>
      </html>

      山东省
    • 0
    • 0
    • 0
    • 1k
    • 请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: