首页 > 开发 > JavaScript > 正文

JavaScript的BOM

2020-03-24 19:03:37
字体:
来源:转载
供稿:网友
这次给大家带来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:

 !DOCTYPE html  html  head  meta charset= UTF-8  title Document /title  style type= text/css  .box1{ height: 900px; background: #ccc; .box2{ height: 500px; background-color: #333; /style  /head  body  div id= box1 /div  div /div  input type= 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:

 !DOCTYPE html  html  head  meta charset= UTF-8  title Document /title  /head  body  input type= button value= 刷新 id= btn  script  /*setTimeout(function () { //location.href = https://www.baidu.com  //window.location = https://www.baidu.com  location.replace( https://www.baidu.com  },1000);*/ document.getElementById( btn ).onclick = function () { location.reload(); //location.reload(true); /script  /body  /html 

history01.html:

 !DOCTYPE html  html  head  meta charset= UTF-8  title Document /title  /head  body  a href= example_2.html example_2.html /a  input type= button value= 后退 id= btn1  input type= button value= 前进 id= btn2  script  var btn1 = document.getElementById( btn1  var btn2 = document.getElementById( btn2  btn1.onclick = function () { //history.back(); history.go(-1); btn2.onclick = function () { history.forward() //history.go(1); /script  /body  /html 

navigator.html:

 !DOCTYPE html  html  head  meta charset= UTF-8  title Document /title  /head  body  script  function getBrowser() { var explorer = navigator.userAgent.toLowerCase(); var browser =  if (explorer.indexOf( msie ) -1) { browser = IE  } else if (explorer.indexOf( chrome ) -1){ browser = Chrome  } else { browser = asdf  return browser; var msg = 您用的是 +getBrowser()+ 浏览器  console.log(msg); /script  /body  /html 

screen.html:

 !DOCTYPE html  html  head  meta charset= 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 

相信看了这些案例你已经掌握了方法,更多精彩请关注php 其它相关文章!

相关阅读:

ES6 module语法加载 import export

判断登陆是否失效代码

如何利用getBoundingClientRect()来实现div容器滚动固定

实现瀑布流布局的俩种方法

以上就是JavaScript的BOM的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表