JavaScript的BOM实例分析

发布时间:2022-03-03 10:31:47 作者:iii
来源:亿速云 阅读:124

这篇文章主要讲解了“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>

  /*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:

  <!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实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. JavaScript BOM Cookie 的使用
  2. JavaScript_BOM对象

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript bom

上一篇:HTML、CSS、JavaScript的区别是什么

下一篇:JavaScript全局变量与生命周期实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》