Location对象案例:5秒后自动跳转页面 案例:获取URL参数数据

    科技2022-07-20  175

    Location对象

    location用于获取或设置窗体的URL,并且可以用于解析URL。 因为location返回的是一个对象,因此这个属性也称为location对象

    URL:统一资源定位符,是互联网上标准资源的地址 URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。 也可认为由4部分组成:协议、主机、端口、路径 URL的一般语法格式为:

    protocol :// hostname[:port] / path / [;parameters][?query]#fragment

    组成说明protocol(协议)通信协议 http ftp maito等host主机(域名)port端口号可选,省略时使用方案的默认端口,各种传输协议都有默认的端口号,如http的默认端口为80path路径由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。query参数,以键值对的形式,用“&”符号隔开fragment片段 #后面内容 常见于链接 锚点

    location对象的属性

    Location 对象属性返回值Location.href设置或返回完整的 URL。Location.host设置或返回主机名和当前 URL 的端口号。Location.port设置或返回当前 URL 的端口号。 如果未写返回 空字符串Location.pathname返回 URL 的路径部分。Location.search返回参数Location.hash返回片段 # 后面的内容 常见于链接(锚点)。

    href search 较为重要

    console.log(location.herf) 得到当前页面的url地址 location.herf= ' ' 跳转到新的页面

    案例:5秒后自动跳转页面

    思路:

    利用定时器做倒计时效果时间到了,就自动跳转页面,使用 location.herf <body> <div></div> <script> var div = document.querySelector("div"); var timer = 5; CutDown();//先调用一次这个函数,防止刚开始刷新页面时有空白问题 setInterval(CutDown, 1000); function CutDown() { if (timer == 0) { location.href = "http://baidu.com"; } else { div.innerHTML = "您将在" + timer + "内跳转页面"; timer--; } } </script> </body>

    案例:获取URL参数数据

    主要练习数据在不同页面上的传递 分析:

    第一个登录页面,里面有提交表单,action提交到index.html 页面第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数在第二个页面中,需要把这个参数提取要把参数里面的?提取,利用substr再利用=号分隔符,分割键和值 split(’=’)

    代码: login.html 页面:

    <body> <form action="index.html"> <input type="text" name="uname" /> <!--必须用name --> <input type="submit" value="登录" /> </form> </body>

    index.html页面

    <body> <div></div> <script> //利用substr('起始的位置',截取几个字符)先去掉 ? var params = location.search.substr(1); //得到的是 uname=name 类型 //再利用=号分隔符,分割键和值 split('=') var arr = params.split("="); //得到的是[uname,name] 类型 //把数据写入到div中 var div = document.querySelector("div"); div.innerHTML = arr[1] + "欢迎您"; </script> </body>
    Processed: 0.013, SQL: 8