161122、BOM 操作寫法樣本

標籤：amp   tar   改變   doc   query   name   頁面跳轉   hostname   interval   

瀏覽器相關資訊

// 瀏覽器資訊

navigator.userAgent // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

// 運行瀏覽器的作業系統平台

navigator.platform // MacIntel

 

瀏覽記錄曆史

// 前進

history.forward()

// 後退

history.back()

 

url 資訊

頁面跳轉

// 當前頁面會記入瀏覽記錄曆史

location.href = ‘http://www.baidu.com‘

// 當前頁面不會記入瀏覽記錄曆史

location.replace(‘http://www.baidu.com‘)

 

頁面重新載入

location.reload()

 

獲得當前 url 的資訊

// 假設當前 url 是 http://192.168.31.194:8000/jquery/index.html?a=3&c=aa#b

 

location.href // 完整的url

location.hostname // 192.168.31.194

location.host // 192.168.31.194:8000

location.port // 8000

location.protocol // http:

location.search // ?a=3&c=aa

location.hash // #b

location.pathname // /jquery/index.html

 

全域對象

資訊彈出框

alert(‘你很帥！‘)

 

確認彈出框

var isReady = confirm(‘準備好來嗎?‘)

if (isReady) {

 

} else {

 

}

 

輸入資訊彈出框

var name = prompt(‘請輸入你的名字‘)

console.log(name)

 

開啟一個新視窗

open(‘http://baidu.com‘)

// 改變某個視窗的 url

open(‘http://baidu.com‘, ‘a‘)

open(‘http://youku.com‘, ‘a‘) // 上面視窗的地址會從 百度 變成 優酷的

 

過段時間後執行

// 1 秒後執行

setTimeout(function() {

  // doSth

}, 1000)

 

每隔一段時間執行

var i = 1

// 每隔 1 秒後執行

var runId = setInterval(function(){

  console.log(i++)

  if(i >= 10) {

    clearInterval(runId) // 停止執行

  }

}, 1000)

 

螢幕每次重新整理時執行

一般是渲染一些 UI。

 

var targetEl = document.querySelector(‘.tar‘)

var res

var isStop

var runId = requestAnimationFrame(function(){

  targetEl.text(res)

  if(isStop) {

    cancelAnimationFrame(runId)

  }

})

 

在控制台輸出資訊

console.log(‘日誌資訊‘)

console.warn(‘警告資訊‘)

console.info(‘普通訊息‘)

console.error(‘錯誤資訊‘)

 

console.log(‘1+2 = %d‘, 3)

var person = {name: ‘Joel‘, gender: ‘男‘}

console.log(‘名字：%s，性別：%s‘, person.name, person.gender)

161122、BOM 操作寫法樣本