location对象

yyyyyyoow

于 2024-07-14 19:48:03 发布

阅读量269

点赞数 6

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/mobolove/article/details/140421644

版权

location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象
URL：统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL的一般语法格式
protocol://host[:port]/path/[?query]#fragment
例：http://www.itcast.cn/index.html?name=andy&age=18#link
组成       说明
protocol   通信协议常用http，ftp，maito等
host       主机（域名）www.itheima.com
port       端口号可选，省略时使用方案的默认端口，http默认80
path       路径有零或多个‘/’符号隔开的字符串
query       参数以键值对的形式，通过&符号分隔开
fragment   片段 #后面内容常见于链接锚点
location对象的属性   返回值
location.href       获取或设置整个URL
location.host       返回逐级（域名）
location.port       返回端口号如果未写返回空字符串
location.pathname   返回路径
location.search       返回参数
location.hash       返回片段 #后面内容
重点记住：href和search
例 5秒之后自动页面跳转
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}

}, 1000);
</script>
</body>

例获取URL参数
参数提取
1.去掉？利用substr
2.利用=分割键和值 split('=')
login.html
<body>
<form action="index.html">//action属性规定当提交表单时，向何处发送表单数据。绝对URL-指向另一个网站。相对URL-指向网站内的一个文件。（action="index.html"）
用户名： <input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
index.html
<body>
<div></div>
<script>
console.log(location.search); // ?uname=andy
// 1.先去掉？ substr('起始的位置'，截取几个字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字符串分割为数组 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
</script>
</body>

location对象的方法
location.assign()跟 href一样可以跳转页面，记录浏览历史可以后退页面
location.replace()替换当前页面，因为不记录历史，所以不能后退页面
location.reload()重新加载页面，相对于刷新按钮或者f5
如果参数为true强制刷新ctrl+f5
location.assign('http://www.itcast.cn');
location.replace('http://www.itcast.cn');
location.reload(true);
第一次打开的页面，第二次打开可能有一些图片、内容缓存到本地了，如果不想用缓存内容可以ctrl+f5

yyyyyyoow

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
location对象

form action="index.html">//action属性规定当提交表单时，向何处发送表单数据。window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。例：http://www.itcast.cn/index.html?substr('起始的位置'，截取几个字符);location.replace()替换当前页面，因为不记录历史，所以不能后退页面。
复制链接

扫一扫