{"id":856,"date":"2025-12-22T09:03:15","date_gmt":"2025-12-22T01:03:15","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=856"},"modified":"2025-12-22T09:03:15","modified_gmt":"2025-12-22T01:03:15","slug":"js%e6%8e%a7%e5%88%b6%e6%b5%8f%e8%a7%88%e5%99%a8%e5%89%8d%e8%bf%9b%e3%80%81%e5%90%8e%e9%80%80%e3%80%81%e9%a1%b5%e9%9d%a2%e8%b7%b3%e8%bd%ac%e8%af%a6%e7%bb%86%e6%96%b9%e6%b3%95%e5%92%8c%e7%a4%ba-2","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/22\/js%e6%8e%a7%e5%88%b6%e6%b5%8f%e8%a7%88%e5%99%a8%e5%89%8d%e8%bf%9b%e3%80%81%e5%90%8e%e9%80%80%e3%80%81%e9%a1%b5%e9%9d%a2%e8%b7%b3%e8%bd%ac%e8%af%a6%e7%bb%86%e6%96%b9%e6%b3%95%e5%92%8c%e7%a4%ba-2\/","title":{"rendered":"js\u63a7\u5236\u6d4f\u89c8\u5668\u524d\u8fdb\u3001\u540e\u9000\u3001\u9875\u9762\u8df3\u8f6c\u8be6\u7ec6\u65b9\u6cd5\u548c\u793a\u4f8b"},"content":{"rendered":"\n

JavaScript \u63a7\u5236\u6d4f\u89c8\u5668\u524d\u8fdb\u3001\u540e\u9000\u3001\u9875\u9762\u8df3\u8f6c\u7684\u8be6\u7ec6\u65b9\u6cd5\u548c\u793a\u4f8b\u5728 JavaScript \u4e2d\uff0c\u63a7\u5236\u6d4f\u89c8\u5668\u7684\u524d\u8fdb\u3001\u540e\u9000\u3001\u5237\u65b0\u548c\u9875\u9762\u8df3\u8f6c\u4e3b\u8981\u901a\u8fc7 window.history \u548c location \u5bf9\u8c61\u5b9e\u73b0\u3002\u4ee5\u4e0b\u662f 2025 \u5e74\u6700\u5e38\u7528\u3001\u6700\u89c4\u8303\u7684\u65b9\u6cd5\u548c\u793a\u4f8b\u30021. \u540e\u9000\uff08Back\uff09 \/ \u524d\u8fdb\uff08Forward\uff09<\/p>\n\n\n\n

\u64cd\u4f5c<\/th>\u65b9\u6cd5<\/th>\u8bf4\u660e<\/th><\/tr>
\u540e\u9000\u4e00\u6b65<\/td>history.back()<\/td>\u7b49\u4ef7\u4e8e\u6d4f\u89c8\u5668\u5de5\u5177\u680f\u7684\u201c\u2190\u201d\u6309\u94ae<\/td><\/tr>
\u524d\u8fdb\u4e00\u6b65<\/td>history.forward()<\/td>\u7b49\u4ef7\u4e8e\u6d4f\u89c8\u5668\u5de5\u5177\u680f\u7684\u201c\u2192\u201d\u6309\u94ae<\/td><\/tr>
\u540e\u9000\/\u524d\u8fdb N \u6b65<\/td>history.go(n)<\/td>n > 0 \u524d\u8fdb\uff0cn < 0 \u540e\u9000\uff0cn = 0 \u5237\u65b0\u5f53\u524d\u9875<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u793a\u4f8b\uff1a<\/p>\n\n\n\n

html<\/p>\n\n\n

\n&lt;button onclick="history.back()">\u2190 \u8fd4\u56de\u4e0a\u4e00\u9875&lt;\/button>\n&lt;button onclick="history.forward()">\u2192 \u524d\u8fdb\u5230\u4e0b\u4e00\u9875&lt;\/button>\n&lt;button onclick="history.go(-2)">\u540e\u9000\u4e24\u9875&lt;\/button>\n&lt;button onclick="history.go(1)">\u524d\u8fdb\u4e00\u9875&lt;\/button>\n&lt;button onclick="history.go(0)">\u5237\u65b0\u5f53\u524d\u9875&lt;\/button>\n<\/pre><\/div>\n\n\n
2. \u9875\u9762\u8df3\u8f6c\uff08Redirect\uff09<\/p>\n\n\n\n
\u65b9\u6cd5<\/th>\u8bf4\u660e<\/th>\u662f\u5426\u52a0\u5165\u5386\u53f2\u8bb0\u5f55<\/th>\u63a8\u8350\u573a\u666f<\/th><\/tr>
location.href = url<\/td>\u6700\u5e38\u7528\uff0c\u7acb\u5373\u8df3\u8f6c<\/td>\u662f<\/td>\u666e\u901a\u8df3\u8f6c<\/td><\/tr>
location.assign(url)<\/td>\u529f\u80fd\u4e0e location.href \u76f8\u540c\uff0c\u4f46\u66f4\u89c4\u8303\u3001\u53ef\u88ab\u5355\u5143\u6d4b\u8bd5\u62e6\u622a<\/td>\u662f<\/td>\u63a8\u8350\u5199\u6cd5<\/td><\/tr>
location.replace(url)<\/td>\u8df3\u8f6c\u4f46\u4e0d\u8bb0\u5f55\u5386\u53f2\uff0c\u7528\u6237\u65e0\u6cd5\u201c\u540e\u9000\u201d\u8fd4\u56de<\/td>\u5426<\/td>\u767b\u5f55\u6210\u529f\u540e\u8df3\u8f6c\u3001404 \u91cd\u5b9a\u5411<\/td><\/tr>
location = url<\/td>\u7b49\u4ef7\u4e8e location.href = url<\/td>\u662f<\/td>\u7b80\u5199\uff08\u4e0d\u63a8\u8350\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u793a\u4f8b\uff1a<\/p>\n\n\n\n
javascript<\/p>\n\n\n
\n\/\/ \u666e\u901a\u8df3\u8f6c\uff08\u52a0\u5165\u5386\u53f2\u8bb0\u5f55\uff09\nfunction gotoBaidu() {\n  location.href = "https:\/\/www.baidu.com";\n  \/\/ \u6216 location.assign("https:\/\/www.baidu.com");\n}\n\n\/\/ \u66ff\u6362\u5f0f\u8df3\u8f6c\uff08\u4e0d\u8bb0\u5f55\u5386\u53f2\uff09\nfunction loginSuccess() {\n  location.replace("\/dashboard");\n}\n\n\/\/ \u76f8\u5bf9\u8def\u5f84\u8df3\u8f6c\nlocation.href = "\/user\/profile";    \/\/ \u8df3\u8f6c\u5230\u5f53\u524d\u57df\u540d\u7684 \/user\/profile\nlocation.href = "..\/login.html";    \/\/ \u76f8\u5bf9\u8def\u5f84\nlocation.href = "#top";             \/\/ \u8df3\u8f6c\u5230\u9875\u9762\u951a\u70b9\uff08\u4e0d\u5237\u65b0\uff09\n<\/pre><\/div>\n\n\n
3. \u5237\u65b0\u9875\u9762<\/p>\n\n\n\n
\u65b9\u6cd5<\/th>\u8bf4\u660e<\/th><\/tr>
location.reload()<\/td>\u5237\u65b0\u5f53\u524d\u9875\u9762\uff08\u9ed8\u8ba4\u4ece\u6d4f\u89c8\u5668\u7f13\u5b58\u52a0\u8f7d\uff09<\/td><\/tr>
location.reload(true)<\/td>\u5f3a\u5236\u4ece\u670d\u52a1\u5668\u91cd\u65b0\u52a0\u8f7d\uff08\u5ffd\u7565\u7f13\u5b58\uff09<\/td><\/tr>
history.go(0)<\/td>\u7b49\u4ef7\u4e8e location.reload()<\/td><\/tr>
location.href = location.href<\/td>\u5f3a\u5236\u5237\u65b0\uff08\u6700\u7b80\u5355\u4e14\u517c\u5bb9\u6027\u597d\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u793a\u4f8b\uff1a<\/p>\n\n\n\n
javascript<\/p>\n\n\n
\n\/\/ \u666e\u901a\u5237\u65b0\uff08\u53ef\u80fd\u7528\u7f13\u5b58\uff09\nlocation.reload();\n\n\/\/ \u5f3a\u5236\u5237\u65b0\uff08\u4ece\u670d\u52a1\u5668\u83b7\u53d6\u6700\u65b0\u7248\u672c\uff09\nlocation.reload(true);  \/\/ \u6ce8\u610f\uff1atrue \u53c2\u6570\u5728\u90e8\u5206\u73b0\u4ee3\u6d4f\u89c8\u5668\u5df2\u5ffd\u7565\uff0c\u4f46\u4ecd\u517c\u5bb9\n\n\/\/ \u63a8\u8350\u5199\u6cd5\uff08\u6700\u53ef\u9760\uff09\nlocation.href = location.href;\n<\/pre><\/div>\n\n\n
4. \u5b8c\u6574\u793a\u4f8b\uff1a\u5bfc\u822a\u680f + \u8df3\u8f6c\u63a7\u5236<\/p>\n\n\n\n
html<\/p>\n\n\n
\n&lt;!DOCTYPE html>\n&lt;html lang="zh-CN">\n&lt;head>\n  &lt;meta charset="UTF-8">\n  &lt;title>JS \u5bfc\u822a\u63a7\u5236&lt;\/title>\n  &lt;style>\n    button { margin: 5px; padding: 8px 16px; }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;h2>\u6d4f\u89c8\u5668\u5bfc\u822a\u63a7\u5236&lt;\/h2>\n  \n  &lt;button onclick="history.back()">\u2190 \u540e\u9000&lt;\/button>\n  &lt;button onclick="history.forward()">\u2192 \u524d\u8fdb&lt;\/button>\n  &lt;button onclick="history.go(0)">\u5237\u65b0&lt;\/button>\n  \n  &lt;hr>\n  \n  &lt;button onclick="gotoPage('https:\/\/www.google.com')">\u8df3\u8f6c Google&lt;\/button>\n  &lt;button onclick="replacePage('\/dashboard')">\u66ff\u6362\u8df3\u8f6c\uff08\u65e0\u5386\u53f2\uff09&lt;\/button>\n  &lt;button onclick="openNewTab('https:\/\/github.com')">\u65b0\u6807\u7b7e\u9875\u6253\u5f00&lt;\/button>\n\n  &lt;script>\n    function gotoPage(url) {\n      location.assign(url); \/\/ \u6216 location.href = url\n    }\n\n    function replacePage(url) {\n      location.replace(url);\n    }\n\n    function openNewTab(url) {\n      window.open(url, '_blank'); \/\/ \u65b0\u6807\u7b7e\u9875\n    }\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/pre><\/div>\n\n\n
5. \u9ad8\u7ea7\u7528\u6cd5\uff1a\u76d1\u542c\u6d4f\u89c8\u5668\u7684\u524d\u8fdb\/\u540e\u9000<\/p>\n\n\n\n
javascript<\/p>\n\n\n
\n\/\/ \u76d1\u542c\u7528\u6237\u70b9\u51fb\u6d4f\u89c8\u5668\u524d\u8fdb\/\u540e\u9000\u6309\u94ae\uff08popstate \u4e8b\u4ef6\uff09\nwindow.addEventListener('popstate', function(event) {\n  console.log('\u7528\u6237\u89e6\u53d1\u4e86\u524d\u8fdb\u6216\u540e\u9000\uff01\u5f53\u524d URL:', location.href);\n  \/\/ \u53ef\u5728\u6b64\u66f4\u65b0\u9875\u9762\u5185\u5bb9\uff08\u5b9e\u73b0\u5355\u9875\u5e94\u7528 SPA \u8def\u7531\uff09\n});\n\n\/\/ \u624b\u52a8\u6dfb\u52a0\u5386\u53f2\u8bb0\u5f55\uff08\u5e38\u7528\u4e8e SPA\uff09\nhistory.pushState({ page: 1 }, "\u6807\u9898", "?page=1");\n\/\/ \u66ff\u6362\u5f53\u524d\u5386\u53f2\u8bb0\u5f55\nhistory.replaceState({ page: 2 }, "\u65b0\u6807\u9898", "?page=2");\n<\/pre><\/div>\n\n\n
6. \u6ce8\u610f\u4e8b\u9879 & \u5e38\u89c1\u95ee\u9898<\/p>\n\n\n\n
\u95ee\u9898<\/th>\u539f\u56e0\/\u8bf4\u660e<\/th>\u89e3\u51b3\u65b9\u6848<\/th><\/tr>
history.back() \u4e0d\u751f\u6548<\/td>\u5386\u53f2\u8bb0\u5f55\u4e2d\u6ca1\u6709\u4e0a\u4e00\u9875\uff08\u65b0\u5f00\u6807\u7b7e\u9875\uff09<\/td>\u68c0\u67e5 history.length<\/td><\/tr>
\u8df3\u8f6c\u540e URL \u5e26 #<\/td>\u4f7f\u7528\u4e86 href=”#”<\/td>\u6539\u7528 javascript:void(0) \u6216 preventDefault()<\/td><\/tr>
\u8de8\u57df\u9650\u5236<\/td>\u53ea\u80fd\u64cd\u4f5c\u540c\u6e90\u9875\u9762\u5386\u53f2\u8bb0\u5f55<\/td>\u2014<\/td><\/tr>
location.replace() \u540e\u65e0\u6cd5\u540e\u9000<\/td>\u8fd9\u662f\u5b83\u7684\u8bbe\u8ba1\u76ee\u7684<\/td>\u9700\u8981\u540e\u9000\u65f6\u7528 location.href<\/td><\/tr>
\u79fb\u52a8\u7aef\/iOS Safari \u95ee\u9898<\/td>history.back() \u6709\u65f6\u4e0d\u89e6\u53d1 popstate<\/td>\u989d\u5916\u76d1\u542c hashchange \u6216\u7528\u5e93<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
7. \u603b\u7ed3\u5bf9\u6bd4\u8868\uff082025 \u5e74\u63a8\u8350\u4f18\u5148\u7ea7\uff09<\/p>\n\n\n\n
\u9700\u6c42<\/th>\u9996\u9009\u65b9\u6cd5<\/th>\u5907\u9009\u65b9\u6cd5<\/th><\/tr>
\u540e\u9000<\/td>history.back()<\/td>history.go(-1)<\/td><\/tr>
\u524d\u8fdb<\/td>history.forward()<\/td>history.go(1)<\/td><\/tr>
\u666e\u901a\u8df3\u8f6c\uff08\u4fdd\u7559\u5386\u53f2\uff09<\/td>location.assign(url)<\/td>location.href = url<\/td><\/tr>
\u66ff\u6362\u8df3\u8f6c\uff08\u65e0\u5386\u53f2\uff09<\/td>location.replace(url)<\/td>\u2014<\/td><\/tr>
\u5237\u65b0<\/td>location.reload()<\/td>location.href = location.href<\/td><\/tr>
\u65b0\u6807\u7b7e\u9875\u6253\u5f00<\/td>window.open(url, ‘_blank’)<\/td>\u2014<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\u4e00\u53e5\u8bdd\u8bb0\u4f4f\uff1a<\/p>\n\n\n\n