BOM的概述及方法

来源:https://www.cnblogs.com/toweiwei/archive/2022/08/03/16548534.html
-Advertisement-
Play Games

BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) window 概述: window是頂層對象 屬於golbal對象。他是 ...


BOM的概述:

bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後)

window

概述: window是頂層對象 屬於golbal對象。他是所有全局變數的父親。

相關方法
列印方法
// window //對象
console.log(window); //window 對象 Window的構造函數
//常用的彈窗方法及列印方法
window.console.log('hello') //console.log() window可以省略的
console.log('日誌') //控制台  log日誌 以日誌的形式列印
console.error('錯誤') //以錯誤的形式列印
console.warn('警告') //以錯誤的形式列印
console.debug('測試') //以錯誤的形式列印
console.info('信息提示') //以錯誤的形式列印

彈窗方法

//彈窗
window.alert('hello') //彈提示窗
var isTrue = confirm('你確認要刪除嗎') //交互框  true確認 false取消 返回
console.log(isTrue);
var str = prompt('請輸入你的手機號') //輸入框 他會有個輸入框讓你輸入返回對應的你輸入的內容 (string的內容)
console.log(str);

打開關閉方法

//打開 open 關閉 close
// 第一個參數是url地址 第二個參數為title target(打開方式 _blank _self _parent) 第三個參數為設置的參數(視窗的高度 寬度等等)
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
//  height=100 窗⼝⾼度;
//   width=400 窗⼝寬度;
//   top=0 窗⼝距離屏幕上⽅的象素值;
//   left=0 窗⼝距離屏幕左側的象素值;
//   toolbar=no 是否顯⽰⼯具欄,yes為顯⽰;
//   menubar,scrollbars 表⽰菜單欄和滾動欄。
//   resizable=no 是否允許改變窗⼝⼤⼩,yes為允許;
//   location=no 是否顯⽰地址欄,yes為允許;
//   status=no 是否顯⽰狀態欄內的信息(通常是⽂件已經打開),yes為允許;
window.close() //關閉當前的視窗 (關閉瀏覽器只能有一個頁面)

改變位置的方法

//moveBy 一個是x軸的距離 y軸的距離
window.moveBy(100,100) //X+100 Y+100
//moveTo 一個x軸 一個y軸
window.moveTo(200,200) //X=200 Y=200

改變大小的方法

//改變對應的視窗大小
window.resizeBy(200,200) //width+200 height+200
//resizeTo 
window.resizeTo(200,200) //width=200 height=200

列印方法

//print列印方法
window.print()

聚焦和失焦的方法

//focus 聚焦  blur 失去焦點
window.focus()
window.blur()

查找方法

//find查找 ctrl+f
window.find()

滾動欄位置改變

//滾動欄位置改變  初始位置 x:0,y:0
window.scrollBy(100,100) //原本的位置 x+100,y+100
window.scrollTo(500,500) //到達位置 x=500 y=500 //回到頂部

location對象 (非常重要)

屬性

console.log(location.hash) //哈希 #後面帶的值 *
console.log(location.host) //主機 功能變數名稱 ip地址+埠號
console.log(location.hostname) //主機名 ip地址 (127.0.0.1表示本機地址和localhost是一樣的)
console.log(location.protocol) //協議 用於通信 (基於tcp/ip)http(明文傳輸) https(安全)(加密過)
console.log(location.port) //埠號  1--65525 (1-100的埠電腦占用了)http預設的埠80 https預設埠443
console.log(location.href) //鏈接的地址  也可以設置
console.log(location.search); //?後面帶的值 一般是get請求傳輸數據的時候 *
console.log(location.origin); //跨域
console.log(location.pathname); //路徑名 獲取的除了協議和ip地址加埠號後面的東西
方法

assign 跳轉頁面

location.assign('http://www.baidu.com')

replace 替換頁面

location.replace('http://www.weibo.com')

reload 重新載入頁面

location.reload()
//參數 boolean類型的值 true(從伺服器載入 慢) false (從緩存中載入 快)

history對象 (重點)

屬性

  • length 歷史頁面個數
  • state 狀態存儲的對象
  • scrollRestoration 滾動欄恢復

方法

forwad 前進

function fn(){
    history.forward() //前進
}

back 後退

function fn1(){
    history.back() //後退
}

go 去任意的歷史頁面

function fn2(){
    history.go(-1) //去任意頁面 0就是自己 小於0 後退 大於0前進
}

pushState

//spa 單頁應用
function fn3(){
    //添加state的值 數據  ""  地址(會產生跨域問題)
    history.pushState('hello','','./index.html') //會改地址 但是不會刷新 推一個歷史頁面到歷史區 state設置進去
}

replaceState

function fn4(){
    //替換state
    history.replaceState('world','','/location對象講解.html') //會改地址 但是不會刷新 在歷史區直接修改當前這個歷史頁面 state設置進去
}

screen 對象

屬性

avaliHeight 可占用的最大高度
avaliWidth 可占用的最大寬度
avaliLeft 離屏幕左側的距離
avaliTop 離屏幕上方的距離

navigator對象

屬性

userAgent 用戶瀏覽器設置信息

下麵是BOM的一個思維導圖

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • lamp 1. lamp簡介 lamp,其實就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一組動態網站或者伺服器的開源軟體 LAMP指的是Linux(操作系統)、Apache(HTTP伺服器)、MySQL(也指MariaDB,資料庫軟體)和PHP(有時也 ...
  • 鎖定讀、UPDATE 或 DELETE 通常會給在SQL語句處理過程掃描到的每個索引記錄上設置記錄鎖。語句中是否存在排除該行的WHERE條件並不重要。InnoDB不記得確切的WHERE條件,但只知道哪些索引範圍被掃描了。鎖通常是next-key鎖,它也阻止插入到緊挨著記錄之前的“間隙”中。然而,間隙 ...
  • ##前置知識 ###當前讀與快照讀 當前讀 什麼是當前讀:讀取的是最新的數據,不會讀到老數據。 何時觸發:update、insert、delete、select lock in share mode、select for update時,總是當前讀。 快照讀 什麼是快照讀:讀取的是歷史版本,不是最新 ...
  • likeshop回收租賃系統適用於物品回收、物品租賃、二手買賣交易等三大場景。 系統支持智能評估回收價格,後臺調整最終回收價,用戶同意回收後系統即刻放款,用戶微信零錢提現。支持線上生成租賃合同,交付租賃押金,生成分期付款合約,逾期自動計算滯納金。 功能強大,流程嚴謹,無論運營還是二開都是性價比極高的 ...
  • 1 屏幕共用功能介紹 屏幕共用是指在視頻通話或互動直播過程中將屏幕內容以視頻的方式分享給其他的觀眾,以增強互動體驗,提高溝通效率。屏幕共用解決方案提升了用戶實時視頻通話的溝通效率。 屏幕共用在如下場景中應用廣泛: 視頻會議場景中,屏幕共用可以將講話者本地的文件、數據、網頁、PPT 等畫面分享給其他與 ...
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 七夕情人節到了,各種App都要忙著上新,抓住互聯網產品的節日熱點,結合應用的類別進行活動營銷。比如購物類App會在節日進行大促;旅游類App會推出各種優惠活動;短視頻和拍照App會推出各種節日限定特效、專屬貼紙等。 尤其是游戲類App,具有較強的社交屬性,在節日熱點一般都會進行版本更新,上線新皮膚新 ...
  • 接上一篇 V8 中的快慢屬性,本篇分析V8 中的快慢數組,瞭解數組全填充還是帶孔、快慢數組、快慢轉化、動態擴縮容等等。 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...