JavaScript Location和History对象方法与属性实例

最新推荐文章于 2022-09-27 15:32:45 发布

li宾是我哥

最新推荐文章于 2022-09-27 15:32:45 发布

阅读量446

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/gx01013/article/details/126250327

版权

1.Location 对象方法

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。

方法名	方法描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新文档替换当前文档。

<body>
    <input type="button" value="assign" id="assign">
    <input type="button" value="reload" id="reload">
    <input type="button" value="replace" id="replace">
    <input type="button" value="href" id="href">


    <script>
        assign.onclick = function() {
            //assign():可以打开新的页面，并且可以返回，可以产生历史记录
            location.assign("https://www.baidu.com")
        }
        reload.onclick = function() {
            // reload():实现的是页面刷新
            location.reload()
        }
        replace.onclick = function() {
            // replace():用新文档替换当前的文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
            location.replace("https://www.baidu.com")
        }
        href.onclick = function() {
            location.href = "https://www.runoob.com/"
        }
    </script>
</body>

Location 属性

属性	说明
host	设置或检索位置或URL的主机名和端口号
hostname	设置或检索位置或URL的主机名部分
hret	设置或检索完整的URL字符串

2.History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载history列表中的前一个URl
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

<body>
    2.html
    <input type="button" value="后退到1.html" id="btn">
    <input type="button" value="跳转到3.html" id="btn2">
    <input type="button" value="forward" id="btn3">
    <input type="button" value="go" id="btn4">
    <script>
        btn.onclick = function() {
            history.back() //后退到历史记录列表的上一个url
        }
        btn2.onclick = function() {
            location.href = "3.html"
        }
        btn3.onclick = function() {
            history.forward() //前进到历史记录列表的下一个url
        }
        btn4.onclick = function() {
            history.go(1)
        }
    </script>
</body>