欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

BOM—浏览器对象模型（Browser Object Model）

程序员文章站 2023-12-24 17:17:15
1,javascript 组成部分： 1.ECMAscript（核心标准）： 定义了基本的语法，比如：if for 数组 字符串 ... 2.BOM ： 浏览器对象模型（Browser Object Model） 2,BOM 的组成部分： 1.window对象 每一个子窗口对应的又是一个window ......

 1,javascript   组成部分：

　　1.ecmascript（核心标准）：    定义了基本的语法，比如：if for 数组 字符串 ...

　　2.bom  ： 浏览器对象模型（browser object model）

2,bom 的组成部分：

　　1.window对象 每一个子窗口对应的又是一个window对象
　　2. screen对象
　　3.location对象
　　4.history对象
　　5.navigator对象
　　6.定时器 （两种）
　　7.弹框（三种）
　　8. document (dom-文档对象模型)

1.1window 对象(表示浏览器窗口):

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

1.2window 尺寸:

　　查看window尺寸有三种方式适用于不同的情况:

1) w3c标准(适用于老版本ie之外的浏览器)

  • window.innerheight - 浏览器窗口的内部高度
  • window.innerwidth - 浏览器窗口的内部宽度

2) 老版本的ie浏览器
 标准模式:
　　document.documentelement.clientheight)
　　document.documentelement.clientwidth)

 怪异模式（向后兼容）中:
　　document.body.clientheight
　　document.body.clientwidth

(如何知道是何种模式?

console.log(document.compatmode)可以查看文档是以什么方式进行解析的
　　 css1compat 标准模式
　　backcompat 怪异模式

)

function getscreen(){    //获取屏幕的可视宽高
            if (window.innerwidth) {    //如果window底下有这个属性，就用这个，    w3c标准
                return {
                    width : window.innerwidth,
                    height : window.innerheight
                }
            }else{    //老版本ie
                if(document.compatmode == "css1compat"){   //标准模式
                    return {
                        width : document.documentelement.clientwidth,
                        height : document.documentelement.clientheight
                    }
                }else{    //怪异模式
                    return {
                        width : document.body.clientwidth,
                        height : document.body.clientheight
                    }
                }    
            }
        }
        console.log(getscreen())

 

1.3 其他 window 方法

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

 

2.1 screen 对象(包含有关用户屏幕的信息)

  • screen.availwidth - 可用的屏幕宽度
  • screen.availheight - 可用的屏幕高度
<script>

document.write("可用宽度：" + screen.availwidth);
document.write("可用高度：" + screen.availheight);

</script>

 

3.1 location对象(用于获得当前页面的地址 (url)，并把浏览器重定向到新的页面)

　　　　　console.log(location.href)    //返回（当前页面的）整个 url：
        console.log(location.hash)   //hash      哈希值，也叫锚点，比方说a链接中的
        console.log(location.host) // host    设置或返回主机名和当前 url 的端口号。
        console.log(location.hostname) // hostname    设置或返回当前 url 的主机名。
        console.log(location.pathname) // pathname    设置或返回当前 url 的路径部分。
        console.log(location.port) // port    设置或返回当前 url 的端口号。
        console.log(location.protocol) // protocol    设置或返回当前 url 的协议。
        console.log(location.search) // search     参数（查询字符串）  设置或返回从问号 (?) 开始的 url（查询部分）。

　　　　// location.href = "http://www.baidu.com"    //放到某一个事件中去触发

 

4.1 history对象(包含浏览器的历史记录)

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击按钮向前相同
<body>
    <a href="http://www.baidu.com">去百度</a>
    <button>后退</button>
    <button>前进</button>

    <script>
        var btn1 = document.getelementsbytagname("button")[0];
        var btn2 = document.getelementsbytagname("button")[1];


        btn1.onclick = function(){
            history.back()
        }
        btn2.onclick = function(){
            history.forward()
        }
    </script>
</body>

 

5.1 navigator对象(记录了浏览器的一些信息的对象)

  1. appcodename 返回浏览器的代码名。
  2. appminorversion 返回浏览器的次级版本。
  3. appname 返回浏览器的名称。
  4. appversion 返回浏览器的平台和版本信息。
  5. browserlanguage 返回当前浏览器的语言。
  6. cookieenabled 返回指明浏览器中是否启用 cookie 的布尔值。
  7. cpuclass 返回浏览器系统的 cpu 等级。
  8. online 返回指明系统是否处于脱机模式的布尔值。
  9. platform 返回运行浏览器的操作系统平台。
  10. systemlanguage 返回 os 使用的默认语言。
  11. useragent 返回由客户机发送服务器的 user-agent 头部的值。
  12. userlanguage 返回 os 的自然语言设置。
<div id="example"></div>

<script>

txt = "<p>browser codename: " + navigator.appcodename + "</p>";
txt+= "<p>browser name: " + navigator.appname + "</p>";
txt+= "<p>browser version: " + navigator.appversion + "</p>";
txt+= "<p>cookies enabled: " + navigator.cookieenabled + "</p>";
txt+= "<p>platform: " + navigator.platform + "</p>";
txt+= "<p>user-agent header: " + navigator.useragent + "</p>";
txt+= "<p>user-agent language: " + navigator.systemlanguage + "</p>";

document.getelementbyid("example").innerhtml=txt;

</script>

 

 

6.1 popupalert 对象

 

　　警告框:

alert("文本")

　　确认框:

confirm("文本")

　　提示框:

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

 

7.1 timing 对象

一次性定时器:

　　settimeout()未来的某时执行代码;

　　cleartimeout()取消settimeout();

无限次定时器:

　　setinterval( );
　　clearinterval();

8.1 cookie (用来识别用户)

有关cookie的例子：

　　名字 cookie:

　　当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "welcome john doe!" 的欢迎词。而名字则是从 cookie 中取回的。

　　密码 cookie:

　　当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

　　日期 cookie:

　　当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："your last visit was on tuesday august 11, 2005!"。日期也是从 cookie 中取回的。

 

上一篇：

下一篇：

推荐阅读