Zohar's blog

Javascript - BOM

JavascriptjavascriptBOMBrowser Object Model

浏览器提供了一系列方法和属性和 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>