JavaScript的BOM实例分析
这篇文章主要讲解了“JavaScript的BOM实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript的BOM实例分析”吧!
location对象
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些
导航的功能,它既是window对象的属性,也是document对象的属性。
语法:location.href
功能:返回当前加载页面的完整URL
说明:location.href与window.location.href等价
语法:location.hash
功能:返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串
语法:location.host
功能:返回服务器名称和端口号(如果有)
语法:locationhostname
功能:返回不带端口号的服务器名称。
语法:location.pathname
功能:返回URL中的目录和(或)文件名。
语法:location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串。
语法:location.protocol
功能:返回页面使用的协议
语法:location.search
功能:返回URL的查询字符串。这个字符串以问号开头。
语法:location.replace(url)
功能:重新定向URL
说明:使用location.replace不会再历时记录中生成新纪录。
语法:location.reload()
功能:重新加载当前显示的页面。
说明:
location.reload()有肯从缓冲中加载
location.reload(true)从服务器重新加载
history对象
history对象保存了用户在浏览器中访问页面的历史记录
语法:history.back()
功能:回到历史记录的上一步
说明:相当于使用了history.go(-1)
语法:location.forward()
功能:回到历时记录的下一步
说明:相当于使用了history.go(1)
语法:history.go(-n)
功能:回到历时记录的前n步
语法:history.go(n)
功能:回到历史记录的后n步
navigator对象
useragent:用来识别浏览器名称,版本,引擎以及操作系统等信息的内容。
screen对象
语法:screen.availWidth
功能:返回可用的屏幕宽度
语法:screen.availHeight
功能:返回可用的屏幕高度
location01.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
.box1{
height:900px;
background:#ccc;
}
.box2{
height:500px;
background-color:#333;
}
</style>
</head>
<body>
<divid="box1"></div>
<div></div>
<inputtype="button"id="btn"value="返回顶部">
<script>
btn.onclick=function(){
location.hash='#box1';
console.log(location.hash);
}
console.log(location.href);
console.log(location.hash);
console.log(location.host);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);
console.log(location.search);
</script>
</body>
</html>
location02.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<inputtype="button"value="刷新"id="btn">
<script>
document.getElementById('btn').onclick=function(){
location.reload();
//location.reload(true);
}
</script>
</body>
</html>
history01.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<ahref="example_2.html">example_2.html</a>
<inputtype="button"value="后退"id="btn1">
<inputtype="button"value="前进"id="btn2">
<script>
varbtn1=document.getElementById('btn1');
varbtn2=document.getElementById('btn2');
btn1.onclick=function(){
//history.back();
history.go(-1);
}
btn2.onclick=function(){
history.forward()
//history.go(1);
}
</script>
</body>
</html>
navigator.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
functiongetBrowser(){
varexplorer=navigator.userAgent.toLowerCase();
varbrowser="";
if(explorer.indexOf("msie")>-1){
browser="IE";
}elseif(explorer.indexOf("chrome")>-1){
browser='Chrome';
}else{
browser='asdf';
}
returnbrowser;
}
varmsg="您用的是"+getBrowser()+'浏览器';
console.log(msg);
</script>
</body>
</html>
screen.html:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.log(screen.availWidth);
console.log(screen.availHeight);
console.log(window.innerWidth);
console.log(window.innerHeight);
</script>
</body>
</html>
感谢各位的阅读,以上就是“JavaScript的BOM实例分析”的内容了,经过本文的学习后,相信大家对JavaScript的BOM实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341