JavaScript Window---浏览器对象模型

Posted 2020-10-06 忘尘天外天

　　浏览器对象模型(BOM)使javascript有能力与浏览器"对话"。浏览器对象模型(Browser  Object  Model，BOM)尚无正式标准.因为现代浏览器(几乎)实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。

　　Window对象

　　所有浏览器都支持window对象。它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。甚至html DOM的document也是window对象的属性之一。

    window.document.getElementById("header");

 与下面效果相同：

    document.getElementById("header") ;

 Window尺寸

　　对于不同版本的浏览器，有不同的方法去确定浏览器窗口的尺寸。

对于Chrome、Firefox、Opera以及Safari：

• window.innerHeight - 浏览器窗口的内部高度（包括滚动条）
• window.innerWidth - 浏览器窗口的内部宽度（包括滚动条）

对于IE8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

涵盖所有浏览器的JavaScript方案：

var   w=window.innerWidth
    ||  document.documentElement.clientWidth
    ||  document.body.clientWidth ;

var   h=window.innerHeight
    ||  document.documentElement.clientHeight
    ||  document.body.clientHeight  ;

 Window对象的其它方法：

• window.open() -  打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸。

JavaScript  Window Screen

　　window screen 对象包含用户屏幕的信息。window screen对象在使用时可以不带window这个前缀。常用属性：screen.availWidth - 可用的屏幕宽度；screen.availHeight  -  可用的屏幕高度

screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

screen.availHeight属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏

JavaScript  Window Location

window.location 对象用于获得当前页面的地址（URL），并把浏览器重新定向到性能的页面。window.location对象在编写时可以不使用window这个前缀。

• location.hostname  返回web诸暨的域名 
• location.pathname  返回当前页面的路径名和文件名
• location.port　       返回web诸暨的端口（80或443）　
• location.protocol    返回所使用的web协议（http://或https://）

Window  Location  Href

location.href  返回当前页面的（完整）URL

Window  Location  Pathname

location.pathname属性返回URL的路径名

Window  Location  Assign

location.assign()方法加载新的文档。语法：window.location.assign("http://www.w3cschool.cc") ;

JavaScript  Window History

　　window.history 对象包含浏览器的历史。window.history在编写时可不使用window这个前缀。为了保护用户的隐私，对JavaScript访问该对象的方法做出了限制。常用方法：

• history.back() -与在浏览器点击后退按钮相同，加载历史列表中的前一个URL
• history.forward()  - 与在浏览器点击向前按钮相同，加载历史列表中的下一个URL

JavaScript  Window Navigaror

　　window.navigator对象包含有关访问者浏览器的信息。window.navigator对象在编写时可不使用window这个前缀。常用的属性：

• navigator.appCodeName  - 浏览器代号
• navigator.appName           -  浏览器名称
• navigtor.appVersion          - 浏览器版本
• navigator.cookieEnabled   - 启用cookie
• navigtor.platform　　        -  硬件平台
• navigator.userAgent         -  用户代理
• navigator.systemLanguage  -  用户代理语言

注意：来自navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，因为：

• navigator数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于navigator可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象，可以使用对象里检测浏览器。例如：只有Opera支持属性“window.opera”。可以据此识别出Opera。例子：if（window.opera）{...action...}

JavaScript 弹窗

可以在JavaScript中创建三种消息框：警告框、确认框、提示框。

警告框（alert()）：常用于确保用户可以得到某些消息。当警告框出现后，用户需要点击确定按钮后才能继续操作。语法：window.alert("text") ;     这个方法可以不带上window前缀，直接使用alert()方法。

确认框（confirm()）：确认框常用于验证是否接受用户操作。当确认框弹出时，用户可以点击“确认” 或者 “取消”来确定用户操作。当点击“确认”，确认框返回true，如果点击“取消”，确认框返回false。语法：window.confirm()方法可以不带上window对象，直接使用confirm()方法。

提示框（prompt()）：提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。

　　语法：window.prompt("text","defaultvalue") ;   这个方法可以不带上window前缀，直接使用prompt()方法。

          var  person = prompt("请输入你的名字");
          if(person!=null$$person.trim().length()>0){
          var  x = "你好" + person + "!今天感觉如何？" ;
          document.getElementById("demo").innerHTML = x ;
}    

 换行

弹窗使用反斜杠+n （\n）来设置换行。

        alert("Hello \nHow  are you?")