0 1 0 1 ★ history对象属性 & 方法大全

不二如是 · 发表于 2017-4-21 10:53:25

购买主题 已有 1 人购买 本主题需向作者支付 3 鱼币 才能浏览

a211827754 · 发表于 2018-9-12 09:50:09

本帖最后由 a211827754 于 2018-9-12 09:52 编辑

history.forward()和history.go()可以演示的，用loaction.assign("https://www.baidu.com")或者location.replace("http://www.fishc.com")产生历史记录，然后再退回来就可以操作了！

QBR · 发表于 2024-12-27 16:26:40

学习了

按我的理解写了一个模拟历史列表的例子希望能帮到世界上下一个看到这的人吧

<!DOCTYPE html>
<html>
<head>
<title>History Example</title>
</head>
<body>
<button onclick="history.back()">返回</button>
<button onclick="history.forward()">前进</button>
<button onclick="history.go(-1)">使用Go(-1)方法返回</button>
<button onclick="addHistory()">模拟访问一个网址</button>
<button onclick="replaceHistory()">替换列表中当前记录</button>
<p>当前页面：<span id="current-page">Home</span></p>
<p>历史记录长度：<span id="history-length">0</span></p>
<script>
// 更新页面显示的当前 URL 和历史记录长度
function updateDisplay() {
document.getElementById("current-page").innerText = window.location.href;
document.getElementById("history-length").innerText = history.length;
}
// 模拟添加新的历史记录小巧思之36进制包含数字与英文的随机字符串
function addHistory() {
history.pushState({}, "New Page", "?page=" + Math.random().toString(36).substring(7));
updateDisplay(); // 更新显示
}
// 替换当前的历史记录
function replaceHistory() {
history.replaceState({}, "Replaced Page", "?replaced=" + Math.random().toString(36).substring(7));
updateDisplay(); // 更新显示
}
// 监听浏览器的 "popstate" 事件，用于处理返回和前进操作
window.addEventListener("popstate", function () {
updateDisplay(); // 当用户返回或前进时，更新显示内容
});
// 初始化页面显示
updateDisplay();
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 61632 狗仔卡	发表于 2017-4-21 10:53:25 \| 显示全部楼层 \|阅读模式购买主题已有 1 人购买本主题需向作者支付 3 鱼币才能浏览本帖被以下淘专辑推荐: · JavaScript - 庖丁解牛\|主题: 312, 订阅: 597
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 1 0 1 ★ history对象属性 & 方法大全

本帖被以下淘专辑推荐:

浏览过的版块

[庖丁解牛] 0 1 0 1 ★ history对象 属性 & 方法大全

本帖被以下淘专辑推荐:

浏览过的版块

[庖丁解牛] 0 1 0 1 ★ history对象属性 & 方法大全