>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25848 个阅读者 刷新本主题
 * 贴子主题:  JavaScript Window 浏览器对象模型 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-13 12:15:41     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript  Window - 浏览器对象模型

     浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。            

浏览器对象模型 (BOM)

     浏览器对象模型( Browser Object

     Model (BOM))尚无正式标准。

      由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。            

Window 对象

      所有浏览器都支持 window 对象。它表示浏览器窗口。

      所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

      全局变量是 window 对象的属性。

      全局函数是 window 对象的方法。

      甚至 HTML DOM 的 document 也是 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
             实用的 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() - 调整当前窗口的尺寸
程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-24 11:45:19 重新编辑]
  Java面向对象编程-->Java语言的基本语法和规范
  JavaWeb开发-->访问数据库(Ⅰ)
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->对象的序列化与反序列化
  精通Spring-->绑定表单
  Vue3开发-->计算属性和数据监听
  Vue CLI项目的package.json中版本号详解~和^和*的区别
  Vue2.0与Vue3.0主要区别总结
  JavaScript Promise对象的用法
  vue的CSS过渡和动画范例
  vue中axios异步调用接口的坑
  Vue项目的性能优化之路
  JavaScript的HTML DOM td / th 对象
  JavaScript的HTML DOM Column 对象
  JavaScript的Screen 对象
  jQuery UI 范例:show()方法
  响应式 Web 设计:显示图片
  CSS Border(边框)
  HTML标签的全局属性
  HTML5 表单属性
  jQuery Mobile 方向改变事件
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。