BOM
-
浏览器对象模型
-
BOM可以是我们通过JS来操作浏览器
-
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
-
window:代表的是整个浏览器的窗口,同时window也是网页中的全局对象
-
Navigator:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
-
Location:代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
-
History:代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或者向后翻页,而且该操作只在当次访问时有效
-
Screen:代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用
Navigator
由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。
一般我们只会使用userAgent来判断浏览器的信息,等价于浏览器
userAgent是一个字符串,包含有用来描述浏览器信息的内容
不同的浏览器会有不同的userAgent
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.log(navigator.userAgent);
var ua=navigator.userAgent;
if(/firefox/i.test(ua)){
alert("你是火狐!");}
else if(/chrome/i.test(ua)){
alert("你是Chrome");}
else if(/msie/i.test(ua)){
alert("你是IE浏览器");}
//IE11中已经将微软和IE表示都已经去除了,所以我们基本已经不能通过USerAgent来识别一个浏览器是否是IE了
//如果通过userAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
//比如 ActiveXObject,如果有,就是IE了,不能用布尔值来判,微软做了手脚,不能通过window.ActiveXObject来判断是否是IE11
if("ActiveXObjevt" in window){
alert("你是IE");
}else{
alert("你不是IE");
}
</script>
</head>
<body>
</body>
</html>
History
可以用来操作浏览器向前或向后翻页
length属性:可以获取当次访问的链接数量
back方法:可以用来回退到上一个页面,作用和浏览器的回退按钮一样
forward方法:可以跳转下一个页面,作用和浏览器的前进按钮一样
go方法:可以用来跳转到指定的页面,徐阿哟一个整数作为参数
参数为 1 表示向前跳转一个页面 2 表示向前跳转两个页面
-1 表示向后跳转一个页面 -2 表示向后跳转两个页面
Location
该对象中封装了地址栏中的信息
如果直接打印Location 可以直接获取当前页面的完整路径
如果直接将Location属性修改为一个完整的路径,或者相对路径,则我们页面会自动跳转到该路径,并且生成相应的历史记录
location="http://www.baidu.com";
assign方法:用来跳转到其他页面,作用和直接修改Location一样
location.assign("http://www.baidu.com");
reload方法:用于重新加载当前页面,作用和刷新按钮一样
如果在该方法中传递一个true作为参数,则会强制清空缓存
location.reload();
replace方法:可以使用新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮
location.replace();
JSON
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<!-- 如果真要兼容IE7及以下的JSON操作,则可以通过引入一个外部的js文件来处理 -->
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
//JSON
//-JS中的对象只有JS自己认识,其他的语言都不认识
//-JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别
// 并且可以转换为任意语言中的对象,在开发中主要用来数据的交互
// JSON -javascript object notation JS对象表示法
// -JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须添加=双引号=,其他的和JS语法一致
// JSON分两种------JSON对象{},数组[]
// JSON中允许的值:字符串、树枝、布尔值、null、对象(普通对象)、数组
var obj='{"name":"孙悟空","age":18,"gender":"男"}';
//将JSON字符串转换为JS中的对象
//在JS中为我们提供了一个工具类,就是JSON
//这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
//JSON.parse()可以将一个JSON字符串转换为js对象
console.log(JSON.parse(json).name);
//JS对象转JSON字符串
var str=JSON.stringify(obj);
console.log(JSON.stringify(obj));
//JSON常在数据交换中使用
//JSON这个对象在IE7及以下不支持在这些浏览器中会报错
//eval()-这个函数可以执行一段字符串形式的JS代码,并将执行结果返回
//-如果使用eval执行的字符串中含有{},它会将{}当成是代码块,如果不希望将其当成代码块,则需要在字符串前后各加一个();
var str="("name":"孙悟空","age":18,"gender":"男")";
var str="alert("hello");";
//eval功能很强大,剋呀直接执行字符串中的js代码
//但是在开发中尽量不要使用,首先它的执行性能比较差,然后它害具有安全隐患
eval(str);
</script>
</head>
<body>
</body>
</html>