JS中有關BOM的應用技巧有哪些
我們曾經講過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('http://www.zhinengshe.com/');" /> </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('abc')" /> </body></html>
開啟原始碼可以發現，當我們點擊了按鈕後，整個頁面的原始碼就只剩下了「abc」——也就是說，如果document.write如果放在事件裡面使用，會先將頁面完全清空再重寫。
可以看到，我們的運行程式碼案例，使用document.write方法是非常合適的：
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
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);
};
};
</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('btn1');
oBtn.onclick=function ()
{
alert('宽:'+document.documentElement.clientWidth+'高:'+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('p1'); op.style.top=document.documentElement.clientHeight-op.offsetHeight+scrollTop+'px';
};
</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中有關BOM的應用技巧有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在iPhone中撤銷從主畫面中刪除
Apr 17, 2024 pm 07:37 PM
從主畫面中刪除了重要內容並試圖將其取回？您可以透過多種方式將應用程式圖示放回螢幕。我們已經討論了您可以遵循的所有方法，並將應用程式圖示放回主畫面如何在iPhone中撤消從主畫面中刪除正如我們之前提到的，有幾種方法可以在iPhone上恢復此變更。方法1–替換應用程式庫中的應用程式圖示您可以直接從應用程式庫將應用程式圖示放置在主畫面上。步驟1–橫向滑動以尋找應用程式庫中的所有應用程式。步驟2–找到您先前刪除的應用程式圖示。步驟3–只需將應用程式圖示從主庫拖曳到主畫面上的正確位置即可。這是將應用程式圖
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
PHP中箭頭符號的作用及實作應用
Mar 22, 2024 am 11:30 AM
PHP中箭頭符號的作用及實踐應用在PHP中，箭頭符號（->）通常用於存取物件的屬性和方法。物件是PHP中物件導向程式設計（OOP）的基本概念之一，在實際開發中，箭頭符號在操作物件時發揮重要作用。本文將介紹箭頭符號的作用以及實踐應用，並提供具體的程式碼範例來幫助讀者更好地理解。一、箭頭符號的作用存取物件的屬性箭頭符號可以用來存取物件的屬性。當我們實例化一個對
從入門到精通：探索Linux tee命令的各種應用場景
Mar 20, 2024 am 10:00 AM
Linuxtee命令是一個非常有用的命令列工具，它可以在不影響已有輸出的情況下，將輸出寫入檔案或將輸出送到另一個命令。在本文中，我們將深入探索Linuxtee命令的各種應用場景，從入門到精通。 1.基本用法首先，我們來看看tee指令的基本用法。 tee指令的語法如下：tee[OPTION]...[FILE]...該指令會從標準輸入讀取數據，並將數據
js和vue的關係
Mar 11, 2024 pm 05:21 PM
js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。
探索Go語言的優勢及應用場景
Mar 27, 2024 pm 03:48 PM
Go語言是一種由Google開發的開源程式語言，於2007年首次發布。它被設計成一種簡單易學、高效、並發性強的語言，受到越來越多開發者的青睞。本文將探討Go語言的優勢，並介紹一些適合Go語言的應用場景，同時給出具體的程式碼範例。優勢並發性強：Go語言內建支援輕量級執行緒－goroutine，能夠輕鬆實現並發程式設計。透過使用go關鍵字就可以啟動goroutin
Linux在雲端運算領域的廣泛應用
Mar 20, 2024 pm 04:51 PM
Linux在雲端運算領域的廣泛應用隨著雲端運算技術的不斷發展和普及，Linux作為一種開源作業系統在雲端運算領域中發揮重要作用。由於其穩定性、安全性和靈活性，Linux系統被廣泛應用於各種雲端運算平台和服務中，為雲端運算技術的發展提供了堅實的基礎。本文將介紹Linux在雲端運算領域的廣泛應用，並給出具體的程式碼範例。一、Linux在雲端運算平台中的應用虛擬化技術虛擬化技術
理解MySQL時間戳記：功能、特性與應用場景
Mar 15, 2024 pm 04:36 PM
MySQL時間戳記是十分重要的資料類型，它可以儲存日期、時間或日期加時間。在實際的開發過程中，合理地使用時間戳記可以提高資料庫操作的效率，並且方便進行時間相關的查詢和計算。本文將從MySQL時間戳記的功能、功能和應用場景等面向展開探討，並結合具體的程式碼範例來講解。一、MySQL時間戳記的功能與特性MySQL中有兩種類型的時間戳，一種是TIMESTAMP
