JS中有關BOM的應用技巧有哪些-js教程-PHP中文網

首頁

web前端

js教程

JS中有關BOM的應用技巧有哪些

亚连

Jun 08, 2018 am 11:32 AM

bomjs應用

我們曾經講過JS由三個部分組成，其中一個部分就是BOM，用於對瀏覽器進行操作。這篇文章我們主要來介紹BOM應用，有興趣的朋友一起看看吧

我們曾經講過JS由三個部分組成，其中一個部分就是BOM，用於對瀏覽器進行操作。這節課我們主要就來介紹BOM。

BOM基礎

我們先來看一個BOM的最基礎功能：開啟、關閉視窗：

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="打开窗口" onclick="window.open(&#39;http://www.zhinengshe.com/&#39;);" />
 </body></html>

open方法用於開啟一個窗口，相對的close方法用於關閉一個窗口。這裡我們可以用open方法實作一個應用：運行程式碼。

在這之前，我們要給大家補充一個關於document.write的小知識。

<!DOCTYPE HTML><html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write(&#39;abc&#39;)" />
 </body></html>

開啟原始碼可以發現，當我們點擊了按鈕後，整個頁面的原始碼就只剩下了「abc」——也就是說，如果document.write如果放在事件裡面使用，會先將頁面完全清空再重寫。

可以看到，我們的運行程式碼案例，使用document.write方法是非常合適的：

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oTxt=document.getElementById(&#39;txt1&#39;);
   var oBtn=document.getElementById(&#39;btn1&#39;);
  
   oBtn.onclick=function ()
   {
    var oNewWin=window.open(&#39;about:blank&#39;, &#39;_blank&#39;);
  
    oNewWin.document.write(oTxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="运行" />
 </body></html>

其中_blank代表新開啟一個視窗（在本視窗開啟用_self），about:blank代表開啟的是空白窗口，然後我們使用document.write向新視窗寫入html，就可以在新視窗執行html程式碼了。

講完open後，我們來說close的一些問題。 close的使用非常簡單，使用window.close便可以執行關閉視窗的事件。但是在火狐瀏覽器下，是無法close一個使用者開啟的窗口，只有一個窗口是用open方法打開的時候才能用close方法關閉。

講完open和close方法後，我們來說兩個常用的屬性：window.nevigator.userAgent和window.location。前者的功能是取得目前瀏覽器的版本訊息，後者的功能是取得目前網頁的位址（不但可以讀取，也可以賦值，可以透過修改location跳轉目前網頁的網址），大家可以用一下看看返回的內容，這裡就不再列舉了。

尺寸及座標

這裡我們討論一下JS關於尺寸和座標的內容。

首先要提到的就是關於視覺區尺寸的知識。什麼是可視區尺寸呢？其實就是使用者端能在螢幕上看到網頁部分的尺寸。可視區的尺寸會隨著視窗的大小而改變。

透過document.documentElement.clientWidth和document.documentElement.clientHeight可以取得目前頁面視覺區的寬度和高度。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <script>
  window.onload=function ()
  {
   var oBtn=document.getElementById(&#39;btn1&#39;);
   oBtn.onclick=function ()
   {
    alert(&#39;宽:&#39;+document.documentElement.clientWidth+&#39;高:&#39;+document.documentElement.clientHeight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="可视区大小" />
 </body></html>

效果如下：

此外針對視覺區，還有一個屬性叫scrollTop，也就是滾動距離，或者說是視覺區到頁面頂端的距離。

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
 
  //chrome
  //alert(document.body.scrollTop);
 
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
  alert(scrollTop);
 };
 </script>
 </head>
 <body style="height:2000px;">
 </body></html>

效果如下：

//這裡有圖

值得注意的是document.documentElement.scrollTop僅僅在ie下相容，在chrome下的寫法則為document.body.scrollTop，因此我們用||方法處理相容問題。
常用方法和事件

這裡我們嘗試使用fixed以外的另一種方法實現元素的固定定位（fixed在ie6下不相容）。

這裡我們再畫一張圖：

可以看得出，只要我們將黑線的長度計算出來，就可以將右下方的p塊進行固定定位了。而黑線的長度剛好等於可視區高度減去p塊的offsetHeight。

<html>
 <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <style>
  #p1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   var op=document.getElementById(&#39;p1&#39;);  op.style.top=document.documentElement.clientHeight-op.offsetHeight+scrollTop+&#39;px&#39;;
  };
  </script>
 </head>
 <body>
 <p id="p1"></p>
 </body></html>

效果如下：

可以看到我們的p區塊有輕微的抖動，因為onscroll函數一直在發生，每發生一次便會調用一次，所以會發生這種情況。另外還有一個更嚴重的情況：如果我們改變視窗大小，p塊並不會跟著走而是保持在原地，因此我們還要用到另一個事件－－

window.onresize(頁面大小改變時觸發的事件：)：

window.onscroll=window.onresize=function (){...}

最後我們來說說幾個常用的系統對話框：

alert("內容") 警告框，沒有回傳值
confirm("提問的內容") 選擇框，會給確定或取消選項，傳回一個boolean
##prompt( "提示文字","預設文字") 會彈出一個可輸入的文字框，傳回值為輸入的文字內容（字串），不輸入則為null

上面是我整理給大家的，希望今後對大家有幫助。

在JS中Map和ForEach的差別有哪些？

在vue中如何實作頁面載入進度條元件

javascript該如何實現獲取日期段內每天不同的價格

以上是JS中有關BOM的應用技巧有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles