<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # 瀏覽器對象 JavaScript可以獲取瀏覽器提供的很多對象,并進行操作。 ## window `window`對象不但充當全局作用域,而且表示瀏覽器窗口。 `window`對象有`innerWidth`和`innerHeight`屬性,可以獲取瀏覽器窗口的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等占位元素后,用于顯示網頁的凈寬高。 兼容性:IE&lt;=8不支持。 ``` 'use strict'; // 可以調整瀏覽器窗口大小試試: alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight); ``` 對應的,還有一個`outerWidth`和`outerHeight`屬性,可以獲取瀏覽器窗口的整個寬高。 ## navigator `navigator`對象表示瀏覽器的信息,最常用的屬性包括: * navigator.appName:瀏覽器名稱; * navigator.appVersion:瀏覽器版本; * navigator.language:瀏覽器設置的語言; * navigator.platform:操作系統類型; * navigator.userAgent:瀏覽器設定的`User-Agent`字符串。 ``` 'use strict'; alert('appName = ' + navigator.appName + '\n' + 'appVersion = ' + navigator.appVersion + '\n' + 'language = ' + navigator.language + '\n' + 'platform = ' + navigator.platform + '\n' + 'userAgent = ' + navigator.userAgent); ``` _請注意_,`navigator`的信息可以很容易地被用戶修改,所以JavaScript讀取的值不一定是正確的。很多初學者為了針對不同瀏覽器編寫不同的代碼,喜歡用`if`判斷瀏覽器版本,例如: ``` var width; if (getIEVersion(navigator.userAgent) < 9) { width = document.body.clientWidth; } else { width = window.innerWidth; } ``` 但這樣既可能判斷不準確,也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回`undefined`的特性,直接用短路運算符`||`計算: ``` var width = window.innerWidth || document.body.clientWidth; ``` ## screen `screen`對象表示屏幕的信息,常用的屬性有: * screen.width:屏幕寬度,以像素為單位; * screen.height:屏幕高度,以像素為單位; * screen.colorDepth:返回顏色位數,如8、16、24。 ``` 'use strict'; alert('Screen size = ' + screen.width + ' x ' + screen.height); ``` ## location `location`對象表示當前頁面的URL信息。例如,一個完整的URL: ``` http://www.example.com:8080/path/index.html?a=1&b=2#TOP ``` 可以用`location.href`獲取。要獲得URL各個部分的值,可以這么寫: ``` location.protocol; // 'http' location.host; // 'www.example.com' location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP' ``` 要加載一個新頁面,可以調用`location.assign()`。如果要重新加載當前頁面,調用`location.reload()`方法非常方便。 ``` 'use strict'; if (confirm('重新加載當前頁' + location.href + '?')) { location.reload(); } else { location.assign('/discuss'); // 設置一個新的URL地址 } ``` ## document `document`對象表示當前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結構,`document`對象就是整個DOM樹的根節點。 `document`的`title`屬性是從HTML文檔中的`&lt;title&gt;xxx&lt;/title&gt;`讀取的,但是可以動態改變: ``` 'use strict'; document.title = '努力學習JavaScript!'; ``` 請觀察瀏覽器窗口標題的變化。 要查找DOM樹的某個節點,需要從`document`對象開始查找。最常用的查找是根據ID和Tag Name。 我們先準備HTML數據: ``` <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"> <dt>摩卡</dt> <dd>熱摩卡咖啡</dd> <dt>酸奶</dt> <dd>北京老酸奶</dd> <dt>果汁</dt> <dd>鮮榨蘋果汁</dd> </dl> ``` 用`document`對象提供的`getElementById()`和`getElementsByTagName()`可以按ID獲得一個DOM節點和按Tag名稱獲得一組DOM節點: ``` 'use strict'; var menu = document.getElementById('drink-menu'); var drinks = document.getElementsByTagName('dt'); var i, s, menu, drinks; menu = document.getElementById('drink-menu'); menu.tagName; // 'DL' drinks = document.getElementsByTagName('dt'); s = '提供的飲料有:'; for (i=0; i<drinks.length; i++) { s = s + drinks[i].innerHTML + ','; } alert(s); ``` `document`對象還有一個`cookie`屬性,可以獲取當前頁面的Cookie。 Cookie是由服務器發送的key-value標示符。因為HTTP協議是無狀態的,但是服務器要區分到底是哪個用戶發過來的請求,就可以用Cookie來區分。當一個用戶成功登錄后,服務器發送一個Cookie給瀏覽器,例如`user=ABC123XYZ(加密的字符串)...`,此后,瀏覽器訪問該網站時,會在請求頭附上這個Cookie,服務器根據Cookie即可區分出用戶。 Cookie還可以存儲網站的一些設置,例如,頁面顯示的語言等等。 JavaScript可以通過`document.cookie`讀取到當前頁面的Cookie: ``` document.cookie; // 'v=123; remember=true; prefer=zh' ``` 由于JavaScript能讀取到頁面的Cookie,而用戶的登錄信息通常也存在Cookie中,這就造成了巨大的安全隱患,這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的: ``` <!-- 當前頁面在wwwexample.com --> <html> <head> <script src="http://www.foo.com/jquery.js"></script> </head> ... </html> ``` 如果引入的第三方的JavaScript中存在惡意代碼,則`www.foo.com`網站將直接獲取到`www.example.com`網站的用戶登錄信息。 為了解決這個問題,服務器在設置Cookie時可以使用`httpOnly`,設定了`httpOnly`的Cookie將不能被JavaScript讀取。這個行為由瀏覽器實現,主流瀏覽器均支持`httpOnly`選項,IE從IE6 SP1開始支持。 為了確保安全,服務器端在設置Cookie時,應該始終堅持使用`httpOnly`。 ## history `history`對象保存了瀏覽器的歷史記錄,JavaScript可以調用`history`對象的`back()`或`forward ()`,相當于用戶點擊了瀏覽器的“后退”或“前進”按鈕。 這個對象屬于歷史遺留對象,對于現代Web頁面來說,由于大量使用AJAX和頁面交互,簡單粗暴地調用`history.back()`可能會讓用戶感到非常憤怒。 新手開始設計Web頁面時喜歡在登錄頁登錄成功時調用`history.back()`,試圖回到登錄前的頁面。這是一種錯誤的方法。 任何情況,你都不應該使用`history`這個對象了。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看