欢迎访问 生活随笔!

凯发k8官方网

当前位置: 凯发k8官方网 > 前端技术 > html >内容正文

html

bom—浏览器对象模型(browser object model) -凯发k8官方网

发布时间:2024/10/12 html 34 豆豆
凯发k8官方网 收集整理的这篇文章主要介绍了 bom—浏览器对象模型(browser object model) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

 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 对象(表示浏览器窗口):

  • 所有浏览器都支持 window 对象。它表示浏览器窗口。
  • 所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。
  • 全局变量是 window 对象的属性。
  • 全局函数是 window 对象的方法。
  • 甚至 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

    3)如何知道是何种模式?

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

    function getscreen(){ //获取屏幕的可视宽高if (window.innerwidth) { //如果window底下有这个属性,就用这个, w3c标准return {width : window.innerwidth,height : window.innerheight}}else{ //老版本ieif(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 - 可用的屏幕高度

    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() - 与在浏览器中点击按钮向前相同

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

  • appcodename 返回浏览器的代码名。
  • appminorversion 返回浏览器的次级版本。
  • appname 返回浏览器的名称。
  • appversion 返回浏览器的平台和版本信息。
  • browserlanguage 返回当前浏览器的语言。
  • cookieenabled 返回指明浏览器中是否启用 cookie 的布尔值。
  • cpuclass 返回浏览器系统的 cpu 等级。
  • online 返回指明系统是否处于脱机模式的布尔值。
  • platform 返回运行浏览器的操作系统平台。
  • systemlanguage 返回 os 使用的默认语言。
  • useragent 返回由客户机发送服务器的 user-agent 头部的值。
  • userlanguage 返回 os 的自然语言设置。
  • 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 中取回的。

    总结

    以上是凯发k8官方网为你收集整理的bom—浏览器对象模型(browser object model)的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。

    • 上一篇:
    • 下一篇:
    网站地图