1. 程式人生 > >JavaScript-BOM

JavaScript-BOM

input 指定 htm ces 滾動 頂部 order 滾動條 ati

一、BOM

  瀏覽器對象

二、window和document

簡單來說,document是window的一個對象屬性。
Window 對象表示瀏覽器中打開的窗口。
如果文檔包含框架(frame 或 iframe 標簽),瀏覽器會為 HTML 文檔創建一個 window 對象,並為每個框架創建一個額外的 window 對象。
所有的全局函數和對象都屬於Window 對象的屬性和方法。
document   對 Document 對象的只讀引用
alert($(window).height()); //瀏覽器時下窗口可視區域高度 alert($(document).height()); //瀏覽器時下窗口文檔的高度
alert($(document.body).height());//瀏覽器時下窗口文檔body的高度 alert($(document.body).outerHeight(true));//瀏覽器時下窗口文檔body的總高度 包括border padding margin alert($(window).width()); //瀏覽器時下窗口可視區域寬度 alert($(document).width());//瀏覽器時下窗口文檔對於象寬度 alert($(document.body).width());//瀏覽器時下窗口文檔body的高度 alert($(document.body).outerWidth(
true));//瀏覽器時下窗口文檔body的總寬度 包括border padding margin alert($(document).scrollTop()); //獲取滾動條到頂部的垂直高度 alert($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度   1、window.close();     關閉窗口,關閉頁面

    window.onload=function()
    {    
      var btn1=document.getElementById(‘btn1‘);
      btn1.onclick=function()
      {
        window.close();
      }
    }

            2、confirm()     方法用於顯示一個帶有指定消息和 OK 及取消按鈕的對話框。

    window.onload=function()
    {
      var str=confirm(‘您是否要刪除‘);
      if(str==false){
        alert(‘好的‘);
      }else{
        alert(‘再見‘);
      }
    }

     3、window.location     跳轉到頁面     <input type="button" value="aaa" onclick="window.location=‘http://www.zhinengshe.com/‘;" />   4、window.open     打開新頁面     <input type="button" value="open" onclick="window.open(‘close.html‘);" />      5、prompt()     方法用於顯示可提示用戶進行輸入的對話框。

    var res=prompt(‘輸入姓名‘,‘MWL‘);
    alert(res);

 

   6、scrollTop

      滾動距離

    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    console.log(typeof scrollTop); //number
    alert(‘您已經滾動了‘+scrollTop+"px的距離");

  7、window.navigator.userAgent

    瀏覽器信息

     alert(window.navigator.userAgent);

  8、write()

    顯示信息,但之前的信息會消失

    window.onload=function()
    {
      var btn1=document.getElementById(‘btn1‘);
      btn1.onclick=function()
      {
        document.write(‘asdasd‘);
      }
    }

  9、document.documentElement.clientWidth

    可視區

    window.onload=function ()
    {
      var oBtn=document.getElementById(‘btn1‘);
      oBtn.onclick=function ()
      {
        alert(document.documentElement.clientWidth+‘,‘+document.documentElement.clientHeight);
      };
    };

  10、運行輸入框中的代碼

    HTML:  

      <textarea id="txt1" rows="10" cols="40"></textarea><br>
      <input id="btn1" type="button" value="運行" />

    JS:

      window.onload=function ()
      {
        var oTxt=document.getElementById(‘txt1‘);
        var oBtn=document.getElementById(‘btn1‘);
        oBtn.onclick=function ()
        {
          var oNewWin=window.open(‘about:blank‘,‘_blank‘)
          oNewWin.document.write(oTxt.value);
        };
      };

      

JavaScript-BOM