History对象 and Location对象，表单元素事件

最新推荐文章于 2024-08-21 18:16:41 发布

Q53100

最新推荐文章于 2024-08-21 18:16:41 发布

阅读量99

点赞数

文章标签：前端 javascript java html

本文链接：https://blog.csdn.net/Q53100/article/details/127062949

版权

History对象

history对象是记录用户曾经浏览过的页面(URL)，并且可以实现浏览器前进与后退，从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
如下图所示是History对象的方法：

在这里插入图片描述

案例：

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
</body>
 
<body>
    <a href="index.html">点击我去往首页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.back();
            history.go(-1);
        })
    </script>
</body>

Location对象

location.href: 返回当前页面的完整的URL地址；
location.search: 返回URL后面的参数(类似于"?name=lc&age=20")；
location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)；
location.host: 返回页面的域名及端口号；
location.hostname: 返回页面的域名；
location.port: 返回页面的端口号；
location.pathname: 返回页面中的路径或文件名；
location.origin: 返回URL源地址；
location.hash: 返回URL 散列值（#后面的内容），如果没有则为空字符串。

设置location属性

location的属性不仅可以获取，也可以设置相关属性，部分属性设置后会导致重新加载新的URL。

这里以https://www.baidu.com为例：

location.hash = "#123"; // url: https://www.baidu.com/#123 

// 参数修改
location.search = "?wd=123" // url: https://www.baidu.com/?wd=location 会重新加载

// 修改host
location.hash = "www.bilibili.com"; // url:https://www.bilibili.com/ 页面会重新加载，跳转到bilibili

// 修改href
location.href = "https://www.bilibili.com/"; // url: https://www.bilibili.com 是否会跳转可想而知

location常用方法

location.assign(url): 跳转到url，浏览器会记录历史(可以后退)；
location.replace(url): 跳转到url，浏览器不会记录历史(不可以后退)；
location.reload(boolean): 重新加载当前显示的页面，不传参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以给 reload()传个 true。

以当前页面为百度为例，如下：

location.assign("https://www.bilibili.com");

可以后退回百度；

location.replace("https://www.bilibili.com");

无法后退；

// 正常重新加载
location.reload();

// 强制从服务器重新加载
location.reload(true);

表单元素事件

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>
        <button>注册</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    var form = document.getElementById('form');
    //给文本框设置聚焦和失焦
    //先获取文本框
    var input = form.username;
    //设置聚焦事件
    //元素.onfocus = function(){}
    input.onfocus = function () {
        this.style.background = "pink";
    }
    //元素.onblur = function(){}
    input.onblur = function () {
        this.style.background = "";
    }
</script>

Q53100

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
History对象 and Location对象，表单元素事件

location.reload(boolean): 重新加载当前显示的页面，不传参数，页面会以最有效的方式重新加载。history对象是记录用户曾经浏览过的页面(URL)，并且可以实现浏览器前进与后退，从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个。location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)；location.assign(url): 跳转到url，浏览器会记录历史(可以后退)；location.hostname: 返回页面的域名；
复制链接

扫一扫