javascript核心技术(四十三)浏览器对象模型BOM(五) location对象 刷新与跳转

[复制链接] [提交至百度]
查看: 617|回复: 4

857

主题

1451

帖子

6904

积分

管理员

人亦已歌

Rank: 12Rank: 12Rank: 12

积分
6904

活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

发表于 2023-1-27 20:59:21 | 显示全部楼层 |阅读模式
下面来讲一下BOM模型中一个比较重要的对象,那就是location,我们常常使用该对象的reload和href属性动态的实现页面跳转。
先来看一下location对象长什么样子
javascript核心技术(四十三)浏览器对象模型BOM(五) location对象 刷新与跳转

javascript核心技术(四十三)浏览器对象模型BOM(五) location对象 刷新与跳转

可以看到,在location对象中包含了一些与请求相关的属性,其中最常用的是reload和href。
一、href 跳转
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>location对象 刷新与跳转</title>
</head>
<body>
<script type="text/javascript">
        //使用js控制页面跳转 给location.href重新赋值
        location.href = 'http://www.teamczyx.com'; //非常重要
</script>
</body>
</html>


当载入以上代码后,浏览器会自动跳转到http://www.teamczyx.com中。
注意:vscode的内置浏览器不支持跳转,请用谷歌浏览器测试。

二、reload 刷新
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>location对象 刷新与跳转</title>
</head>
<body>
<input type="button" value="刷新" id="btn">
<script type="text/javascript">
document.getElementById('btn').onclick = function(){
    location.reload(); //只是刷新页面本身
    // location.reload(true); //强制刷新 页面中加载的静态资源文件css/js/图片 也会刷新
}
</script>
</body>
</html>

当点击刷新按钮后页面会刷新。
注意:vscode的内置浏览器不支持BOM刷新,请用谷歌浏览器测试。


以上就是关于location对象的讲解,我们只说了最常用的刷新与跳转操作,其余属性大家可以自己测试一下。

1

主题

186

帖子

95

积分

营销菜鸟

Rank: 3Rank: 3

积分
95
发表于 2023-2-20 23:47:17 | 显示全部楼层
果然是精华!  值得学

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-5 03:17:56 | 显示全部楼层
大家好,我是一个初学者,我觉得要学好编稆这玩意,就得把数学学好才行,数学是编程的基础!!!

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-3-15 00:52:16 | 显示全部楼层
文章在别处看过,不过很有感触。。。。。

3

主题

91

帖子

50

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
50

终身会员

发表于 4 天前 | 显示全部楼层
谢!
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

精彩图文
 
 
在线客服
技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表