BOM浏览器对象模型

2018-07-28  本文已影响0人  _无味

window对象

window对象的属性
window对象是是指浏览器窗口。它是当前页面的顶层对象
console.log(window.screenX,window.screenY)                          
//这两个属性代表浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离(单位像素)。
//这两个属性只读。
console.log(window.innerHeight,window.innerWidth)                   
//返回网页在当前窗口中可见部分的高度和宽度,即“视口”(viewport)的大小(单位像素)。
//这两个属性只读
console.log(window.outerHeight,window.outerWidth)               
//返回浏览器窗口的高度和宽度,包括浏览器菜单和边框(单位像素)。
//这两个属性只读
console.log(window.scrollX,window.scrollY)                              
//window.scrollX属性返回页面的水平滚动距离,
//window.scrollY属性返回页面的垂直滚动距离,
//单位都为像素。这两个属性只读。
console.log(window.screen.height,window.screen.width)               
//返回当前屏幕的宽度和高度      
console.log(window.screen.availHeight,window.screen.availWidth)         
//这两个属性代表屏幕的可用宽的和可用高度。
//可用的高度不包括windows任务栏和macOS中的Dock栏。
console.log(window.screen.orientation)                              
//返回一个对象,表示屏幕的方向。该对象的type属性是一个字符串,表示屏幕的具体方向
//landscape-primary                 表示横放,                                     
//landscape-secondary               表示颠倒的横放,                
//portrait-primary                  表示竖放,                                  
//portrait-secondary                表示颠倒的竖放                          
window对象的方法
alert()
//弹出对话框
prompt(,)   
//可传两个参数,第一个参数是提示信息。第二个参数是默认值。点取消返回null
confirm()                           
//弹出一个确认的对话框。返回一个布尔值。确定返回true,取消返回false
window.open("https://www.baidu.com/","百度","width=800,height=500")   
window.open() 可传三个值
//1.url 打开窗口的地址
//2.窗口的名字。相同名字的窗口会被占用。
//3.新窗口的参数。 
window.close()      
//用来关闭自身的窗口。
window.stop()           
//相当于点击了浏览器的停止按钮。停止加载当前网页
window.scrollTo(0,0)            
//将文档滚动到指定位置。它接受两个参数,表示滚动后位于窗口左上角的页面坐标
window.scrollTo({top:100,left:100,behavior:"smooth"})           
//字符串,可选三个值:smooth平滑,instant瞬间,auto默认值                                                          
window.scrollBy(200,200)        
//用于将网页滚动指定距离(单位像素)它接受两个参数:水平向右滚动的像素,垂直向下滚动的像素
console.log(window.getSelection())  
//获取选中的文本,返回一个对象
console.log(window.getSelection().toString())
//返回我们所选中的文本
window.print()  
//弹出打印机对话框  和我们点击打印的按钮是一样的效果。

Navigator对象
navigator属性指向一个包含浏览器信息的 Navigator 对象。js可以通过这个属性可以获取浏览器的信息。返回浏览器的信息

navigator.userAgent
//返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息以及操作系统信息。
navigator.plugins   
//返回浏览器所安装的插件
navigator.platform
//返回用户的操作系统信息,比如MacIntel、Win32、Linux x86_64等 。
navigator.onLine
//返回用户的在线状态。true在线,false离线
navigator.language
//返回浏览器的首选语言
console.log(navigator.languages)
//返回浏览器可接受的语言。

History对象 黑丝特瑞
window.history属性指向 History 对象,它表示当前窗口的浏览历史。

window.history.length              //表示浏览过的网页的个数
history.back();                    //后退     
history.forward();                 //前进
history.go(-2);                    //跳转指定页面
history.go(0)                      //相当于刷新页面

location对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
url: Uniform Resource Locator 统一资源定位符,代表路径,俗称:网址

location.protocol                  //返回当前的url协议
location.href                      //返回或设置当前完整的url
location.hostname                 //返回或设置当前完整的服务器地址
location.host                     //返回或设置当前完整的服务器地址和端口号
location.port                     //返回或设置当前URL的端口号
location.pathname                 //返回或设置当前URL路径部分
location.search                   //返回或设置当前URL查询字符串
location.hash                     //返回或设置当前URL的片段标识符
//片段标识符,表示资源内的某一位置。在HTML文档里,浏览器会寻
//找name属性为指定值的<a>标签,找到后滚动页面到顶部位置进行展示
location.reload()                 // 重载网页
location.assign()                 //加载新页面
location.replace()                //替换新页面
//此方法不会在历史记录中保留信息
encodeURI()         
//方法用于转码整个 URL。
//它会将元字符和转义字符之外的字符,都进行转义。
//encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"
decodeURI()
//方法用于解码整个 URL。
//它用于转义,转义之后的字符。
//decodeURI("http://www.example.com/q=%E6%98%A5%E8%8A%82")
//'http://www.example.com/q=春节'
上一篇下一篇

猜你喜欢

热点阅读