讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
BOM概述
在实际开发中，JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象；各内置对象之间按照层次组织起来的模型统称为浏览器对象模型Browser Object Model简称BOM，其架构如下图所示：
在BOM架构中可看出：window对象是BOM的顶层对象，它代表浏览器的窗口。所以，在HTML中所有全局JavaScript 对象(函数和变量)都自动成为 window 对象的成员。也就是说：
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
来看一个我们之前常写的例子：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>window</title>
</head>
<body>
<script type="text/javascript">
var name="本文作者：谷哥的小弟";
var blog="博客地址：https://blog.csdn.net/lfdfhl";
function printInfo(message){
alert(message);
}
document.write(name+"<br />");
document.write(blog+"<br />");
printInfo("Hello JavaScript");
</script>
</body>
</html>
结果如下：
实际上，它等效于如下代码：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>window</title>
</head>
<body>
<script type="text/javascript">
var name="本文作者：谷哥的小弟";
var blog="博客地址：https://blog.csdn.net/lfdfhl";
function printInfo(message){
window.alert(message);
}
window.document.write(window.name+"<br />");
window.document.write(window.blog+"<br />");
window.printInfo("Hello JavaScript");
</script>
</body>
</html>
window对象常用属性
window对象常用属性如下：
在此，介绍window中的核心属性。
location
location(地址栏对象)用于获取当前浏览器中URL地址栏内的相关数据并更改当前用户在浏览器中访问的URL，实现新文档的载入、重载以及替换等功能。
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<input type="button" value="页面跳转" onclick="openNewPage()">
<input type="button" value="刷新页面" onclick="freshCurrentPage()">
<p id="time"></p>
<script>
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var dayOfWeek = date.getDay();
var time = year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second + " 星期" + dayOfWeek;
document.getElementById('time').innerHTML = time;
//页面跳转
function openNewPage() {
window.location.assign('http://www.ifeng.com/')
}
//刷新页面
function freshCurrentPage() {
location.reload(true);
}
</script>
</body>
</html>
结果如下：
history
history(历史对象)用于记录浏览器的访问历史记录并可实现网页的前进、后退等常规功能。
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>history</title>
</head>
<body>
<input type="button" value="打开新网页" onclick="openNewPage()">
<input type="button" value="前 进" onclick="goForward()">
<script>
function openNewPage() {
window.location.assign('46.html');
}
function goForward() {
history.forward();
}
</script>
</body>
</html>
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>history</title>
</head>
<body>
<input type="button" value="后退" onclick="goBack()">
<script>
function goBack() {
history.back();
}
</script>
</body>
</html>
结果如下：
navigator
navigator(浏览器对象)用于获取浏览器自身的相关数据，如浏览器的名称、版本等。
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>navigator </title>
</head>
<body>
<script type="text/javascript">
document.write("浏览器名称："+navigator.appName+"<br />");
document.write("浏览器平台与版本信息："+navigator.appVersion+"<br />");
document.write("操作系统平台："+navigator.platform+"<br />");
document.write("是否启用Cookie："+navigator.cookieEnabled+"<br />");
document.write("是否启用Java："+navigator.javaEnabled()+"<br />");
document.write("userAgent的值为："+navigator.userAgent+"<br />");
</script>
</body>
</html>
结果如下：
当然，您也可以通过遍历的方式获取与浏览器相关的所有信息。
代码如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
<script type="text/javascript">
var nav = window.navigator;
var info = "本浏览器相关信息如下:<br>";
for (var propertyName in nav) {
info = info + propertyName + "：" + window.navigator[propertyName] + "<br>";
}
document.writeln(info);
</script>
</body>
</html>
结果如下：
Geolocation
在HTML5中新增geolocation属性，利用该属性可以引用Geolocation对象从而实现定位功能。
Geolocation常用方法如下：
-
getCurrentPosition(success, error, options)获取设备当前位置。
success表示成功得到位置信息时的回调函数，该函数参数为Position对象
error表示获取位置信息失败时的回调函数，该函数参数为PositionError类型
options该对象用于设置可选参数；比如：可在该参数中设置超时，缓存等 -
watchPosition(success, error, options)当设备的地理位置发生改变的时候自动调用该方法。该方法的三个参数的含义同getCurrentPosition( )一致，不再赘述。watchPosition( )方法返回一个ID，若需取消监听则可通过 Geolocation.clearWatch( ) 传入该ID实现取消
-
clearWatch(watchID) 终止监听
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
} else {
alert("您的浏览器不支持地理定位");
}
// 获取地理位置成功的回调函数
function successCallback(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var timestamp = position.timestamp;
alert("timestamp=" + timestamp + "，经度=" + longitude + "，纬度=" + latitude);
}
// 获取地理位置失败的回调函数
function errorCallback(error) {
alert(error.code + " " + error.message);
}
// 配置信息
var options = {
timeout: 2000
};
</script>
</body>
</html>
在该示例里，我们在定位成功的回调函数中获取了当前的经度、纬度、获取成功时的时间戳。但是请注意，在使用Geolocation之前最好先判断当前设备是否支持定位，毕竟有的浏览器对于HTML5支持得不够好。
结果如下：
screen
screen(屏幕对象)可获取与屏幕相关的数据，如屏幕的分辨率、坐标信息等。
示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="UTF-8">
<title>screen</title>
</head>
<body>
<script type="text/javascript">
document.write("屏幕宽度："+screen.width+"<br />");
document.write("屏幕高度："+screen.height+"<br />");
</script>
</body>
</html>
结果如下：
document
document (文档对象)亦称为DOM对象，我们在后续的学习中会专门详细介绍，在此略过。
window对象常用方法
window对象常用方法如下：
在此，介绍window中的核心方法。
prompt( )
window对象提供的prompt( )方法用于生成用户输入的对话框，示例如下：
//提醒用户输入
prompt("请输入您的用户名");
//提醒用户输入并附带默认值
prompt("请输入您的用户名","韩梅梅");
confirm( )
window对象提供的confirm( )方法用于弹出确认对话框，示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8" />
<title>confirm</title>
</head>
<body>
<input type="button" value="Delete" onclick="clickListener()"/>
<script type="text/javascript">
function clickListener(){
if(confirm("确定删除么?")){
alert("您点击了确定");
}else{
alert("您点击了取消");
}
}
</script>
</body>
</html>
结果如下：
close( )
window对象提供的close( )方法用于关闭浏览器窗口，示例如下：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8" />
<title>close</title>
</head>
<body>
<input type="button" value="Close Window" onclick="clickListener()"/>
<script type="text/javascript">
function clickListener(){
window.close();
}
</script>
</body>
</html>
转载：https://blog.csdn.net/lfdfhl/article/details/100727003
查看评论