• 售前

  • 售后

热门帖子
入门百科

BOM location对象、navigator对象、history对象

[复制链接]
静静的等258 显示全部楼层 发表于 2022-1-16 16:54:30 |阅读模式 打印 上一主题 下一主题
1. location对象

URL
同一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地点。互联网上的每个文件都有一个唯一的URL,它包罗的信息指出文件的位置以及欣赏器应该怎么处置惩罚它。
URL的一样平常语法格式为:
  1. protocol://host[:port]/path/[?query]#fragment
  2. http://www.itcast.cn/index.html?name=andy&age=18#link
复制代码
构成分析protocol通讯协议 常用的http,ftp,maito等host主机(域名) www.itheima.comport端标语 可选,省略时使用方案的默认端口 如http的默认端口为80path路径 由零或多个’/'符号隔开的字符串,一样平常用来表现主机上的一个目次或文件地点query参数 以键值对的情势通过&符号分隔开来fragment片断 #反面内容常见于链接 锚点location对象的属性
location对象属性返回值location.href获取大概设置整个URLlocation.host返回主机(域名) www.itheima.comlocation.port返回端标语 假如未写返回 空字符串location.pathname返回路径location.search返回参数location.hash返回片断 #反面的内容常见于链接 锚点5秒后跳转页面
  1. <body>
  2.     <button>点击</button>
  3.     <div></div>
  4.     <script>
  5.         var btn = document.querySelector('button');
  6.         var div = document.querySelector('div');
  7.         btn.addEventListener('click', function () {
  8.             //console.log(location.href);  返回文件的路径
  9.             location.href = 'http://www.itcast.cn';
  10.         })
  11.         var timer = 5;
  12.         setInterval(function () {
  13.             if (timer == 0) {
  14.                 location.href = 'http://www.itcast.cn';
  15.             } else {
  16.                 div.innerHTML = '您将在' + timer + '秒后跳转到首页';
  17.                 timer--;
  18.             }
  19.         }, 1000);
  20.     </script>
  21. </body>
复制代码
login.html
  1. <body>
  2.     <form action="index.html">
  3.         用户名: <input type="text" name="uname">
  4.         <input type="submit" value="登录">
  5.     </form>
  6. </body>
复制代码
index.html
  1. <body>
  2.     <div></div>
  3.     <script>
  4.         console.log(location.search); //?uname=andy
  5.         //1.先去掉?  substr('起始位置',截取几个字符);
  6.         var params = location.search.substr(1); //uname=andy
  7.         console.log(params);
  8.         //2.利用=把字符串分割为数组 split('=');
  9.         var arr = params.split('=');
  10.         console.log(arr); //['uname','andy']
  11.         var div = document.querySelector('div');
  12.         //3.把数据写入div中
  13.         div.innerHTML = arr[1] + '欢迎您';
  14.     </script>
  15. </body>
复制代码
location对象的方法
location对象方法返回值location.assign()跟href一样,可以跳转页面(也称为重定向页面)location.replace()更换当前页面,由于不记录汗青,以是不能退却页面location.reload()重新加载页面,相称于革新按钮大概f5 假如参数为true 欺压革新ctrl+f5
  1. <body>
  2.     <button>点击</button>
  3.     <script>
  4.         var btn = document.querySelector('button');
  5.         btn.addEventListener('click', function () {
  6.             //记录浏览历史,可实现后退功能
  7.             //location.assign('http://www.itcast.cn');
  8.             //不记录浏览历史,不可实现后退
  9.             //location.replace('http://wwwitcast.cn');
  10.             location.reload(true);
  11.         })
  12.     </script>
  13. </body>
复制代码
2. navigator对象

navigator对象包罗有关的欣赏器的信息,它有许多属性,常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
可判断用户哪个终端打开页面,实现跳转
  1. if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
  2. Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBrowser|BrowserNG|WebOS
  3. |Symbian|Windows Phone)/i))) {
  4.      window.location.href = "";  //手机
  5. } else {
  6.      window.location.href = ""; //电脑
  7. }
复制代码
3.history对象

window对象给我们提供了一个history对象,与欣赏器汗青记录举行交互。该对象包罗用户(在欣赏器窗口中)访问过的URL.
history作用back()可以退却功能forward()进步功能go(参数)进步退却功能 参数假如为1,进步1个页面;假如为-1,退却1个页面index.html
  1. <body>
  2.     <a href="list.html">点击</a>
  3.     <button>前进</button>
  4.     <script>
  5.         var btn = document.querySelector('button');
  6.         btn.addEventListener('click', function () {
  7.             //history.forward();
  8.             history.go(1);
  9.         })
  10.     </script>
  11. </body>
复制代码
list.html
  1. <body>
  2.     <a href="index.html">点击</a>
  3.     <button>后退</button>
  4.     <script>
  5.         var btn = document.querySelector('button');
  6.         btn.addEventListener('click', function () {
  7.             //history.back();
  8.             history.go(-1);
  9.         })
  10.     </script>
  11. </body>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作