JavaScript BOM - 浏览器对象模型

news/2024/7/19 14:48:22 标签: javascript, js

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

浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model)尚无正式标准。由于现代浏览器已经实现了 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() - 调整当前窗口的尺寸

JavaScript Window Screen

window.screen 对象包含有关用户屏幕的信息。
Window Screen
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性:
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
实例
返回您的屏幕的可用宽度:

<script>
document.write("可用宽度:" + screen.availWidth);
</script>

Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
实例
返回您的屏幕的可用高度:

<script>
document.write("可用高度:" + screen.availHeight);
</script>

JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
Window Location
window.location 对象在编写时可不使用 window 这个前缀。
一些例子:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
Window Location Href
location.href 属性返回当前页面的 URL。
实例
返回(当前页面的)整个 URL:

<script>
document.write(location.href);
</script>

Window Location Pathname
location.pathname 属性返回 URL 的路径名。
实例
返回当前 URL 的路径名:

<script>
document.write(location.pathname);
</script>

Window Location Assign
location.assign() 方法加载新的文档。
实例
加载一个新的文档:

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

JavaScript Window History

window.history 对象包含浏览器的历史

Window History
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
一些方法:
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同


http://www.niftyadmin.cn/n/1037851.html

相关文章

elment-ui 清除this.$refs[‘form‘].validate留下的校验信息

最简单的方法是全部清楚 this.$refs.form.clearValidate()比如一些校验的页面 打开时可能会带有上一次校验的信息 可以在打开页面时执行这个方法全部清除掉 如果你知是想清除单个的例如 result: [{ required: true, message: 所属省市区不能为空, trigger: blur }, ],当这个校…

JS库

JavaScript 库 - jQuery、Prototype、MooTools。 JavaScript 框架&#xff08;库&#xff09; JavaScript 高级程序设计&#xff08;特别是对浏览器差异的复杂处理&#xff09;&#xff0c;通常很困难也很耗时。为了应对这些调整&#xff0c;许多的 JavaScript (helper) 库应运…

java代码块执行顺序

public class ClassInitializatin {public ClassInitializatin(){System.out.println("构造器");}static {//类的初始化System.out.println("静态块");}{System.out.println("代码块");}public static void main(String[] args) {System.out.pri…

java虚拟机类加载机制与反射全解

java虚拟机类加载机制与反射全解 引子&#xff1a; 开门见山&#xff0c;先来个经典面试题&#xff1a;&#xff08;如果你已经懂了&#xff0c;那么你可以离开了&#xff0c;如果你一脸懵逼&#xff0c;那么请好好看本文&#xff0c;理解透彻很有好处&#xff01;&#xff09;…

jQuery 教程

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性&#xff1a; HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍…

超硬核前端众单位计算方式,自适应响应式爱好者必看

px 这个单位在实际开发中也会用到&#xff0c;但他是无法实现一个屏幕的适应的 计算方式 1px 1个橡树点 每个屏幕的像素点都是不一样的&#xff0c;大屏幕台式机可能有两千多像素点&#xff0c;小屏幕手机几百橡树点的也很多 所以用px写的页面 除非掺杂其他单位 否则很难适应所…

IT培训机构那些让人恶心的招生手法

我还记得20年我刚从实习公司出来&#xff0c;技术还不是很成熟&#xff0c;就希望找一家公司锻炼技术&#xff0c;顺便提升自己&#xff0c;结果连着遇到很多打着招工名义招生的培训机构 特此转载这篇文章&#xff0c;希望大家避免上当 李旭最近遇到了一件怪事儿&#xff0c;找…

HTML引用百度地图,在网页中添加一张定位地图

最终我们将得到这样一个页面地图 其实也没什么难度&#xff0c;就是用一下别人写好的东西 <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>定位功能</title…