JavaScript Window-浏览器对象模型

小灰灰 2022-09-21 11:40 201阅读 0赞

浏览器对象模型BOM（Browser Object Model）  
所有浏览器都支持window对象，它表示浏览器窗口。所有javascript全局对象，函数以及变量均自动成为window对象的成员。  
全局变量是window对象的属性  
全局函数是window对象的方法

window.document.getElementById("header");
    //与此相同
    document.getElementById("header");

**window尺寸**  
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，*不包括*工具栏和滚动条）  
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：  
window.innerHeight - 浏览器窗口的内部高度  
window.innerWidth - 浏览器窗口的内部宽度  
对于 Internet Explorer 8、7、6、5：  
document.documentElement.clientHeight  
document.documentElement.clientWidth  
或者  
document.body.clientHeight  
document.body.clientWidth

//通用的得到浏览器的长和高的办法
    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

**其他方法**  
window.open() - 打开新窗口  
window.close() - 关闭当前窗口  
window.moveTo() - 移动当前窗口  
window.resizeTo() - 调整当前窗口的尺寸  
**Window Screen**  
window.screen 对象包含有关用户屏幕的信息,在编写时可以不使用window这个前缀  
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

document.write("可用宽度：" + screen.availWidth);

**Window Location**  
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。  
*返回当前的URL*  
`document.write(location.href);`//[http://www.w3school.com.cn/js/js\_window\_location.asp][http_www.w3school.com.cn_js_js_window_location.asp]  
*返回URL路径名*  
`document.write(location.pathname);`///js/js\_window\_location.asp  
*加载新文档*

<input type="button" value="加载新文档" onclick="newDoc()">
    <script> function newDoc() { window.location.assign("http://www.w3school.com.cn") } </script>

**Window History**  
window.history对象包含浏览器的历史  
history.back() - 与在浏览器点击后退按钮相同，加载历史列表中的前一个URL  
history.forward() - 与在浏览器中点击按钮向前相同,加载历史列表中的下一个URL

<input type="button" value="Back" onclick="goBack()">
    <script> function goBack() { window.history.back() } </script>

**Window Navigator**  
window.navigator 对象包含有关访问者浏览器的信息。  
来自 navigator 对象的信息具有*误导性*，*不应该*被用于检测浏览器版本，这是因为：  
navigator 数据可被浏览器使用者更改，浏览器无法报告晚于浏览器发布的新操作系统  
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。  
**消息框**  
*警告框*

alert("文本")

*确认框*

confirm("文本")

<input type="button" onclick="show_confirm()" value="Show a confirm box" />
    
    function show_confirm() { 
    var r=confirm("Press a button!");
    if (r==true)
      {
      alert("You pressed OK!");
      }
    else
      {
      alert("You pressed Cancel!");
      }
    }

*提示框*

prompt("文本","默认值")

<input type="button" onclick="disp_prompt()" value="显示提示框" />
    function disp_prompt() { 
      var name=prompt("请输入您的名字","Bill Gates")
      if (name!=null && name!="")
        {
        document.write("你好！" + name + " 今天过得怎么样？")
        }
      }

**计时**  
setTimeout()

//第一个参数一般是对函数的调用，第二个参数是从当前起多少毫秒执行第一个参数
    var t=setTimeout("javascript语句",毫秒)

clearTimeout(参数)：停止某个函数的执行

//设置按钮，可以开始计时，可以停止计时
    <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount() { c=0; setTimeout("document.getElementById('txt').value=0",0); clearTimeout(t); } </script>
    <form>
    <input type="button" value="开始计时！" onClick="timedCount()">
    <input type="text" id="txt">
    <input type="button" value="停止计时！" onClick="stopCount()">
    </form>

**Cookies**  
cookie用来识别用户，cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。  
浏览器会显示上次访问的时间，这个日期是从cookie中取回的。

//创建一个cookie，存储名称，值和过期天数
    function setCookie(c_name,value,expiredays) { 
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }

//检查是否存在cookie，假如对象中存在某些cookie，会继续检查指定的cookie是否存储，找到返回相应的值，否则返回空字符串。
    function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=")
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1 
        c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        } 
      }
    return ""
    }

//如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。
    function checkCookie() { 
    username=getCookie('username')
    if (username!=null && username!="")
      {alert('Welcome again '+username+'!')}
    else 
      {
      username=prompt('Please enter your name:',"")
      if (username!=null && username!="")
        {
        setCookie('username',username,365)
        }
      }
    }

[http_www.w3school.com.cn_js_js_window_location.asp]: http://www.w3school.com.cn/js/js_window_location.asp