JavaScript - BOM

2019/07/28 JavaScript

浏览器提供了一系列方法和属性和 JavaScript 进行交互,因此称为 BOM (Browser Object Model)

目录

Window 对象

表示浏览器窗口,所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

DOM 中的 document 对象是 window 的成员之一,因此上一篇 JavaScript - BOM 实际上讲的是 window 的 document 成员对象

  • document 成员

      <p id="p_window"></p>
      <script>
      a = "This is a global variable.";
      window.document.getElementById("p_window").innerHTML = window.a;
      </script>
    

window 成员变量

  1. window.innerHeight:浏览器窗口的内部高度(包括滚动条)

  2. window.innerWidth:浏览器窗口的内部宽度(包括滚动条)

     <p id="p_window_variable"></p>
     <script>
     document.getElementById("p_window_variable").innerHTML = "Height: " + 
     window.innerHeight + "Width" + window.innerWidth;
     </script>
    

window 成员方法

  1. window.open():打开新窗口

     <button onclick="openNewWindow()" style="margin: 12px 0px">Open new Window</button>
    
     <script>
     var newWindow;
     function openNewWindow(){
         newWindow = window.open('', '', 'width=200, height=100');    
         newWindow.document.write("<p>This is a new Window</p>"); 
         }
     </script>
    
  2. window.focus():聚焦到窗口

     <button onclick="focusNewWindow()" style="margin: 12px 0px">Focus new Window</button>
    
     <script>
     function focusNewWindow(){newWindow.focus();}
     </script>
    
  3. window.moveTo():移动窗口

     <button onclick="moveNewWindow()" style="margin: 12px 0px">Move new Window</button>
        
     <script>
     function moveNewWindow(){newWindow.moveTo(500, 100);newWindow.focus();}
     </script>
    
  4. window.resizeTo():调整窗口尺寸

     <button onclick="resizeNewWindow()" style="margin: 12px 0px">Resize  new Window</button>
    
     <script>
     function resizeNewWindow(){newWindow.resizeTo(250, 250);newWindow.focus();}
     </script>
    
  5. window.close():关闭窗口

     <button onclick="closeNewWindow()" style="margin: 12px 0px">Close new Window</button>
    
     <script>
     function closeNewWindow(){newWindow.close();}
     </script>
    
  6. window.alert():警告框

     <button onclick="tiggerAlert()" style="margin: 12px 0px">Tigger alert box</button>
    
     <script>
     function tiggerAlert(){window.alert("This is a alert box!")}
     </script>
    
  7. window.confirm():确认框

     <button onclick="tiggerConfirm()" style="margin: 12px 0px">Tigger confirm box</button>
     <p id="p_confirm" style="text-align:center">RESULT</p>
    
     <script>
     function tiggerConfirm(){
         var x;
         var r=confirm("This is a confirm box!");
         if (r==true)
             x="You confirmed!";
         else
             x="You canceled!";
         document.getElementById("p_confirm").innerHTML=x;
     }
     </script>
    

    RESULT

  8. window.prompt():提示框

     <button onclick="tiggerPrompt()" style="margin: 12px 0px">Tigger prompt box</button>
     <p id="p_prompt" style="text-align:center">RESULT</p>
    
     <script>
     function tiggerPrompt(){
         var person=prompt("Please input your name: ","zohar");
         if (person!=null && person!=""){
             document.getElementById("p_prompt").innerHTML="Hello " + person + "!";
         }
     }
     </script>
    

    RESULT

  9. window.setInterval():计时循环

  10. window.clearInterval():清除计时循环

    <button onclick="tiggerInterval()" style="margin:12px 0px">Tigger interval</button> &nbsp;
    <button onclick="stopInterval()" style="margin: 12px 0px">Stop interval</button>
    <p id="p_clock" style="text-align:center">Tigger to set an interval clock.</p>
    
    <script>
    var interval;
    function tiggerInterval(){
        interval = window.setInterval(function(){
            var time = new Date();
            document.getElementById("p_clock").innerHTML=time.toLocaleTimeString();
        }, 1000)
    };
    function stopInterval(){window.clearInterval(interval);}
    </script>
    
     

    Tigger to set an interval clock.

  11. window.setTimeout():定时器

  12. window.clearTimeout():清除定时器

    <button onclick="tiggerTimeout()" style="margin:12px 0px">Tigger timeout</button> &nbsp;
    <button onclick="stopTimeout()" style="margin:12px 0px">Stop timeout</button>
    <p id="p_clock" style="text-align:center">Tigger to set a alert after 3 seconds.</p>
    
    <script>
    var timeout;
    function tiggerTimeout(){
        timeout=window.setTimeout(function(){alert("Now is 3s later.")},3000);
    }
    function stopTimeout(){window.clearTimeout(timeout);}
    </script>
    
     

    Tigger to set a alert after 3 seconds.

  13. window.onload:入口函数

    自加载,在页面加载完毕后(所有内容,包括外部图片)自动加载指定方法

    <p id="p_auto_clock" style="text-align:center">This is a clock auto work.</p>
    
    <script>
    window.onload = function(){
        interval = window.setInterval(function(){
            var time = new Date();
            document.getElementById("p_auto_clock").innerHTML=time.toLocaleTimeString();
        }, 1000)
    };
    </script>
    

    This is a clock auto work.

成员对象

screen 对象

window.screen 对象包含有关用户屏幕的信息。

  • window.screen.availWith:可用的屏幕宽度

  • window.screen.availHeight:可用的屏幕高度

      <p id="p_window_screen"></p>
      <script>
      document.getElementById("p_window_screen").innerHTML = "availHeight: " + 
      window.scerrn.availHeight + ";\tavailWith" + window.screen.availWith;
      </script>
    

location 对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

  • location.hostname:返回 web 主机的域名

  • location.pathname:返回当前页面的路径和文件名

  • location.href:返回当前页面的 URL

  • location.port:返回 web 主机的端口 (80 或 443)

  • location.protocol:返回所使用的 web 协议(http 或 https)

  • location.assign():加载新的文档

      <p id="p_window_location"></p>
      <hr/>
      <button onclick="goOtherPlace()" style="margin:12px 0px">Go</button>
    
      <script>
      document.getElementById("p_window_location").innerHTML = 
          "hostname: " + window.location.hostname + 
          "<hr/>pathname: " + window.location.pathname + 
          "<hr/>href: " + window.location.href + 
          "<hr/>port: " + window.location.port + 
          "<hr/>protocol: " + window.location.protocol;
      function goOtherPlace(){
          var theUrl=prompt(
              "Please input the web site: ","https://zoharyip.club"
          );
          if (theUrl!=null && theUrl!=""){
              window.location.assign(theUrl);
          }
      }
      </script>
    


history 对象

window.history 对象包含浏览器的历史。

  • history.back():后退

  • history.forward():前进

      <button onclick="goBack()" style="margin:12px 0px">Go Back</button>
    
      <script>
      function goBack(){window.history.back()}
      </script>
    

window.navigator 对象包含有关访问者浏览器的信息,navigator 可被用户修改,因此应该用于检测浏览器版本。

  • window.navigator.appCodeName

  • window.navigator.appName

  • window.navigator.appVersion

  • window.navigator.cookieEnabled

  • window.navigator.platform

  • window.navigator.userAgent

  • window.navigator.systemLanguage

      <p id="p_window_navigator"></p>
    
      <script>
      document.getElementById("p_window_navigator").innerHTML = 
          "Browser Code Name: " + navigator.appCodeName + 
          "<br/>Browser Name: " + navigator.appName + 
          "<br/>Browser Version: " + navigator.appVersion + 
          "<br/>Browser Cookie Option: " + navigator.cookieEnabled + 
          "<br/>Browser Hardware Platform: " + navigator.userAgent + 
          "<br/>User Agency: " + navigator.userAgent + 
          "<br/>User Agency Language: " + navigator.systemLanguage;
      </script>
    

正在加载今日诗词....

Access Statistics

Table of Contents