3

BOM

学前端要学css html javascript

学习javascript要学 ecmascript(es3,es5,es6,es7) dom bom

我们现在来学习BOM

BOM是浏览器对象模型(Browser Object Model)

window(窗口)
navigator(导航)
location
screen
history
document

width(窗口)

window对象是js中的顶级对象,所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调用的时候可以省略window。我们在控制台打印 console.log(windows) ,控制台会输出很多属性,事实上,navigator , location , screen , history , document 这几个属性也是 window 下的属性。

1.打开与关闭
     打开 window.open(url,type) //type _self(当前窗口打开) _blank(默认 新窗口打开)
     关闭 window.close() 关闭窗口 (它只能关闭程序打开的窗口直接在地址栏输入地址打开的页面不适用。)
2.系统对话框
    alert() (系统弹窗)
    confirm() (确认,取消弹窗)
    prompt() (输入弹窗)
3.定时器
    setInterval clearInterval 间隔一段时间执行一次代码
    setTimeout clearTimeout 到指定一段时间后执行一次代码

navigator(导航)

包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用

navigator.userAgent(用来描述浏览器的一些版本信息,可以做浏览器的嗅探)
     
window.navigator.appCodeName //浏览器代码名
window.navigator.appName //浏览器步伐名
window.navigator.appMinorVersion //浏览器补钉版本
window.navigator.cpuClass //cpu类型x86
window.navigator.platform //操作体系类型win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客户体系语言zh-cn简体中文
window.navigator.userLanguage //用户语言,同上
window.navigator.appVersion //浏览器版本(包括 体系版本)
window.navigator.userAgent//用户代理头的字符串表示
window.navigator.onLine //用户否在线
window.navigator.cookieEnabled //浏览器是否撑持cookie
window.navigator.mimeTypes

location(地址)

属性:

hostname 主机名(域名)
href(网址)
pathname 具体文件路径
hash 哈希("#"开始的文字)

方法:

reload 重新加载当前页面(刷新)

  location对象:表示载入窗口的URL,也可用window.location引用它
location.href //当前载入页面的完整URL
location.host //服务器的名字
location.pathname //URL中主机名后的部分,如/pictures/index.htm
location.hash //如果URL包含#,返回该符号之后的内容,如#anchor1
location.reload(true | false); //重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false
document.location.reload(URL) //打开新的网页  

screen (屏幕)

相当于css3 媒体查询
window.screen.width //屏幕宽度
window.screen.height //屏幕高度
window.screen.availWidth //可用宽度(除去任务栏的高度)
window.screen.availHeight //可用高度(除去任务栏的高度)  

history (历史)

history.back() //在浏览历史里后退一步
history.forward() //在浏览历史里前进一步
history.go(i) //到汗青详细登记单的第i位

h5里的history(history api):
pushState(a,b,c)//a:数据 c:地址栏
window.onpopstate  

document 文档

document.write() //动态向页面写入内容

哈希
744 声望8 粉丝

下一篇 »
正则表达式