浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
4.1 window 浏览器中主要通过window对象来操作js的代码
js中所有内容都属于window,通过window可以调任意内容,包括document,console等对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window的尺寸
浏览器窗口内部的宽度和高度
window.innerWidth - 浏览器窗口的内部宽度,随着窗口变化而变化
window.innerHeight - 浏览器窗口内部高度,随着窗口变化而变化
body内容的宽度和高度
document.body.clientWidth
document.body.clientHeight
Window Screen
屏幕宽度:screen.availWidth 属性返回访问者屏幕的宽度,固定的屏幕宽度
屏幕高度:screen.availHeight 属性返回访问者屏幕的高度,固定的屏幕高度
document.write("屏幕宽度: " + screen.availWidth);
document.write("屏幕高度: " + screen.availHeight);
Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档
function newDoc()
{
window.location.assign("http://www.baidu.com/")
}
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
Window History
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
history.back()
history.forward()
一些方法示例如下:
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
<body>
<!-- history:用于前进,后退,与刷新操作;与浏览器的控件对应 -->
<a href="04_history_2.html">进入最美页面</a><br />
<input type="button" value="后退" onclick="history.back()" />
<input type="button" value="前进" onclick="window.history.forward()" />
<input type="button" value="刷新" onclick="location.reload()"/>
</body>
<body>
<a href="04_history_1.html">我就是最美页面</a><br />
<input type="button" value="后退2" onclick="history.go(-1)"/>
<input type="button" value="前进2" onclick="history.go(1)"/>
<input type="button" value="刷新2" onclick="history.go(0)"/>
</body>
Window Navigator
window.navigator 对象在编写时可不使用 window 这个前缀。
<div id="example"></div>
<script>
var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
浙公网安备 33010602011771号