JavaScript-4.2-BOM 与 DOM-浏览器对象模型的其他对象
浏览器对象模型的其他对象
一:screen:屏幕对象
- screen 对象包含有关客户端显示屏幕的信息
- 四个常用属性
- screen.width:屏幕宽度
- screen.height:屏幕高度
- screen.availWidth:屏幕可用宽度
- screen.availHeight:屏幕可用高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕对象</title>
</head>
<body>
</body>
<script type="text/javascript">
// screen 对象里面所含的所有信息
console.log(screen);
// 屏幕的有效高度
console.log(screen.availHeight);
</script>
</html>
效果图
二:location:地址栏对象
- location 对象包含有关当前 URL 的信息
- 存储在 window 对象的 location 属性中
- 表示窗口当前显示的文档的 Web 地址,可通过 window.location 属性访问
window.location="http://www.baidu.com"
完整的 URL 路径:
协议名://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&name2=value2)#锚点
例如:
http://127.0.0.1:8080/JavaScript/index.html?name=jack#top
1、location 常用属性
- location 对象的 href 属性存放的是文档的完整 URL
- 其他属性则分别描述了 URL 各个部分
属性 | 方法 |
---|---|
href | 完整路径 |
protocol | 使用的协议(http、https、ftp、file、mailto) |
pathname | 文件路径 |
port | 端口号 |
search | 从?开始往后的部分 |
hostname | 主机名(IP地址) |
host | 主机名和端口号 |
hash | 从#开始的锚点 |
<script type="text/javascript">
console.log(location); // 取得浏览器完整的 URL 信息
console.log(location.href); // 返回当前完整路径
console.log(location.protocol); // 返回协议名 http://
console.log(location.pathname); // 返回文件路径
console.log(location.port); // 返回端口号 :8080
console.log(location.search); // 返回?开头的参数列表
console.log(location.hostname); // 返回主机名 127.0.0.1
console.log(location.host); // 返回主机名+端口号 127.0.0.1:8080
console.log(location.hash); // 返回#开头的锚点
</script>
2、location 常用方法
方法 | 说明 |
---|---|
assign() | 加载新的文档 |
replace | 用新的文档替代当前文档 |
reload | 重新加载当前文档 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<button onclick="locationAssign()">assign</button>
<button onclick="locationReplace()">replace</button>
<button onclick="locationReload()">reload</button>
</body>
<script type="text/javascript">
function locationAssign(){
location.assign("http://www.4399.com"); // 加载新的文档,加载以后,可以后退
}
function locationReplace(){
location.replace("http://www.7k7k.com"); // 使用新的文档替换当前文档,替换以后不能后退
}
function locationReload(){
location.reload(true); // 重新加载当前页面
}
</script>
</html>
效果动态图
reload() 传参与不传参情况的区别
当 reload(true)时,表示从服务器重新加载当前页面
当 reload() 不传参时,表示在本地刷新当前页面
三:history:历史记录对象
- history 对象包含用户(在浏览器窗口中)访问过的 URL
- history 对象是浏览器历史记录相关的对象
属性或方法 | 说明 |
---|---|
length | 返回浏览器历史列表中的 URL 数量 |
back() | 加载 history 列表中的前一个 URL,在浏览器中单击后退按钮相同 |
forward() | 加载 history 列表中下一个 URL,在浏览器中单击按钮向前相同 |
go() | 跳转到浏览历史列表的任意位置 |
<script type="text/javascript">
console.log(history.length); // 浏览历史列表个数
history.back(); //后退
history.forward(); //前进
history.go(-1); // 跳转到浏览历史列表的任意位置
</script>
注意
当 history.go() 中传入参数为 1 时,表示前一页,相当于 forward()
当 history.go() 中传入参数为 -1 时,表示后一页,相当于 back()
当 history.go() 中传入参数为 0 时,表示当前页
四:navigator:浏览器配置对象
- navigator 对象包含了有关浏览器基本配置的各种信息
属性 | 说明 |
---|---|
appName | 产品名称 |
appVersion | 产品版本号 |
userAgent | 用户代理信息 |
platform | 系统平台 |
plugins | 返回一个数组,检测浏览器安装的所有插件 |
MimeTypes | 检查浏览器安装的插件支持的文件类型 |
plugins 属性,可以查看浏览器安装的所有插件
1.description:插件的描述信息
2.filename:插件在本地磁盘的文件名
3.length:插件的个数
4.name:插件名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
</body>
<script type="text/javascript">
console.log(navigator.plugins); // 监测浏览器所安装的各种插件
</script>
</html>
效果动态图