首页JavaScript使用history对象的常用方法完成前进后退跳转全部代码,JS,css,body

JavaScript使用history对象的常用方法完成前进后退跳转全部代码,JS,css,body

时间: 2023-08-19 16:03:53 浏览: 91

以下是一个简单的 HTML 文件，包含了使用 history 对象进行前进后退跳转的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用history对象的常用方法完成前进后退跳转</title> <style> body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; font-size: 16px; margin-right: 10px; } </style> </head> <body> <div class="container"> <h1>使用history对象的常用方法完成前进后退跳转</h1> <p>当前页面的 URL 为：<code id="current-url"></code></p> <p> <button id="back-btn">后退一页</button> <button id="forward-btn">前进一页</button> <button id="go-btn">跳转到前两页</button> </p> </div> <script> // 获取当前页面的 URL，并显示在页面上 var currentUrl = window.location.href; document.getElementById('current-url').textContent = currentUrl; // 给后退按钮绑定事件 document.getElementById('back-btn').addEventListener('click', function () { history.back(); }); // 给前进按钮绑定事件 document.getElementById('forward-btn').addEventListener('click', function () { history.forward(); }); // 给跳转按钮绑定事件 document.getElementById('go-btn').addEventListener('click', function () { history.go(-2); // 跳转到前两页 }); </script> </body> </html> ``` 该 HTML 文件中使用了一些 CSS 样式，使页面看起来更加美观。同时，使用了 JavaScript 代码监听按钮的点击事件，并使用 history 对象进行前进后退跳转。

阅读全文