bom筆記

teren 發布于2019-08-23 13:46 / 2225人閱讀

摘要：不寫第二個參數也可以方法的返回值是一個字符串有可能為空或者，具體分成三種情況。用戶輸入信息，并點擊確定，則用戶輸入的信息就是返回值。用戶點擊了取消或者按了按鈕，則返回值是。

總結bom筆記之前，先轉載一篇大佬寫的文章DOM和BOM操作

一、BOM簡述 1、概念

BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。

2、用途

javacsript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。

二、window對象 1、概述

BOM 的核心是window對象，所有在全局作用域中聲明的變量、函數、對象都會作為window的屬性和方法。
例如：document也是window的屬性

三、window的常用屬性 1、window.innerHeight，window.innerWidth

網頁的CSS布局占據的瀏覽器窗口的高度和寬度，單位為像素
當放大和縮小網頁的時候，瀏覽器窗口的寬高會改變

2、滾動scoll

window.scrollX、window.scrollY 滾動條橫向偏移長度/縱向偏移量

scrollTo(x,y) 讓滾動條滾動到坐標為(x,y)的位置

scrollBy(x,y) 相對當前位置移動滾動條向右和向下滾動長度

舉個特殊的栗子

從圖中可以看出，scrollTo(x,y)能偏移的位置是有限制的。圖中scrollx最大能滾動34px，這就是window窗口和網頁展示width的長度差。

3、navigator(導航)

Window對象的navigator屬性，指向一個包含瀏覽器相關信息的對象。
其中的userAgent指向當前用的瀏覽器種類，你用什么設備看的瀏覽器。比如window的chrome或者是用mac的chrome之類的

判斷用戶的瀏覽器類型

第一種通過直接比較navigator.userAgent重是否含有/Android/，/iPhone/等字樣
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
function isIphone(){
return /iPhone/.test(navigator.userAgent);
}
function isIpad(){
return /iPad/.test(navigator.userAgent);
}
function isIOS(){
return /(iPad)|(iPhone)/.test(navigator.userAgent);
}
第二種，使用search()函數，通過檢測navigator.userAgent重是否含有Android，iPhone等字樣的下標，返回值是否大于0進行判斷

function isAndroid(){
  if(navigator.userAgent.search("android") >0){
    console.log("用戶的瀏覽器類型是android")
  }
}
isAndroid()
function isIphone(){
   if(navigator.userAgent.search("iphone") >0){
    console.log("用戶的瀏覽器類型是iphone")
  }
}
function isIpad(){
   if(navigator.userAgent.search("ipad") >0){
    console.log("用戶的瀏覽器類型是ipad")
  }
}
function isIOS(){
   if(navigator.userAgent.search("ios") >0){
    console.log("用戶的瀏覽器類型是ios")
  }
}

4、screen屬性

screen也是window的屬性，表示的查看瀏覽器的設備（比如電腦屏幕）的信息
縮放網頁不會改變screen.width和 screen.height

alert()，prompt()，confirm() (三種不常用的和網頁交互的方式)它們會彈出不同的對話框，要求用戶做出回應。需要注意的是，alert()、prompt()、confirm()這三個方法彈出的對話框，都是瀏覽器統一規定的式樣，是無法定制的

5、alert(message)

alert(message)，會讓瀏覽器發送一條消息。用戶只有點擊“確定”按鈕，對話框才會消失。在對話框彈出期間，瀏覽器窗口處于凍結狀態，如果不點“確定”按鈕，用戶什么也干不了。

alert("hello,瀏覽器告訴我誰是世界上最美的女人，是我嗎")

6、prompt(text[, default])

prompt方法彈出的對話框，在提示文字的下方，還有一個輸入框，要求用戶輸入信息，并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數據

prompt("我是不是最帥的程序員","yes")

有兩個參數，第二個是預設的回答值。不寫第二個參數也可以

prompt方法的返回值是一個字符串（有可能為空）或者null，具體分成三種情況。

用戶輸入信息，并點擊“確定”，則用戶輸入的信息就是返回值。

用戶沒有輸入信息，直接點擊“確定”，則輸入框的默認值就是返回值。

用戶點擊了“取消”（或者按了Escape按鈕），則返回值是null。

7、confirm(message)

除了提示信息之外，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶的意見

三、URL的編碼/解碼方法

先看一下若愚老師寫的博客聊一聊編碼與亂碼

1：URL 編碼的原因

URL 只能使用 ASCII 字符集來通過因特網進行發送，也就是說URL只能使用英文字母、阿拉伯數字和某些標點符號，不能使用其他文字和符號，所以需要對URL里面的特殊字符進行編碼

2：編碼方式

1）、encodeURI()
主要針對整個url編碼，對于url本身有些的特殊字符不會進行編碼。比如~!@#$&*()=:/,;?+" 和ASCII字母、數字不會編碼
2）、encodeURIComponent()
用于對URL的組成部分COMponent(成分)進行個別編碼，而不用于對整個URL進行編碼。編碼范圍比encodeURI()寬，只有~!*()"和ASCII字母、數字不會編碼

3：解碼方式

1）、decodeURI()
和encodeURI()對應的解碼方式，不能解encodeURIComponent()的碼
2）、decodeURIComponent()
和encodeURIComponent()對應的解碼方式

GPU云服務器云服務器 BOM bom編碼批量去除bom 批量刪除BOM頭

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99530.html

JavaScript 一些有關 BOM 的筆記

摘要：但是如果你在別的頁面比如在百度搜索結果頁面上，運行上面的代碼，會發現窗口不會被移動位置，也不會被改變寬度高度。 JavaScript 一些有關 BOM 的筆記原文鏈接瀏覽器窗口參看我以前的文章：一些窗口滾動和窗口、元素寬度高度的 Web APIs window.open() var win = window.open(URL,name,specs,replace) // wi...

PrototypeZ 2019-08-20 11:04 評論0 收藏0
《JavaScript高級程序設計》筆記：BOM（八）

摘要：瀏覽器對象模型提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關。對象基本上只用來表明客戶端的能力。 BOM(瀏覽器對象模型)提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關。 window對象全局作用域定義全局變量與在window對象上直接定義屬性還是有一點差別：全局變量不能通過delete操作符刪除，而直接在window對象上的定義的屬性可以。 v...

mushang 2019-08-21 10:21 評論0 收藏0
JavaScript高級程序設計學習筆記一（JavaScript簡介）

摘要：在上百種語言中算是命好的一個，還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了，當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個，還有就是最近納入高考體系的python...

supernavy 2019-08-22 11:17 評論0 收藏0
JS學習筆記（第8章）（BOM）

摘要：間歇調用和超時調用超時調用表示在指定時間后執行代碼要執行的代碼，以毫秒表示的時間超時調用注意經過一定時間后改代碼也不一定執行，因為是一個單線程解釋器，任務會按照隊列執行，經過該時間將任務添加到隊列中。 1、window對象 BOM的核心對象是window，它表示瀏覽器的一個實例。window既是通過Javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global...

Cruise_Chan 2019-08-26 10:20 評論0 收藏0
基礎筆記——JS簡介和如何在HTML中使用JavaScript

摘要：作用提供訪問和操作網頁內容的方法和接口瀏覽器對象。部分就好像基于地基設計整座房子的布局，則是房子的裝修。如何在中使用方法一直接在網頁中嵌入代碼你的代碼方法二通過外部文件鏈接進文檔中推薦，并且常用注標簽中還有其他屬性，如有需要可查詢手冊。 JavaScript是一門編程語言，編程語言，編程語言！ JavaScript實現的組成部分 ECMAScript：語言核心。組成部分：語法，...

khlbat 2019-08-20 19:09 評論0 收藏0