更改 URL 而不用 <a href=" "> 重新加载页面

Posted 2023-03-05

【中文标题】更改 URL 而不用 <a href=" "> 重新加载页面

【英文标题】：change URL without reloading the page with <a href=" ">

【发布时间】：2016-04-12 19:50:29

【问题描述】：

对于修改URL而不重新加载页面我们可以使用：

window.history.pushState('page2', 'Title', '/page2.php');

但如果我尝试使用 <a> 元素：

<a onClick='my_function()' href='/page2.php'> Click Here </a>
<script>
function my_fnuction()
    window.history.pushState('page2', 'Title', '/page2.php');


 </script>

它不起作用，那么我怎样才能同时使用<a> 元素和window.history.pushState() 呢？ 像twitter和facebook一样，用户可以点击右键在新窗口中打开网址，直接点击获取页面和更改网址，无需重新加载

【问题讨论】：

onClick='my_function()' 和 function my_fnuction() ??

【参考方案1】：

在 onclick 中，您有 my_function，其中实际的函数名称是 my_fnuction。

您需要取消默认行为，如果您的 onclick 函数返回 false，则默认浏览器行为被取消。

代码：

<a onClick='return my_function()' href='/page2.php'> Click Here </a>
<script>
function my_function()
    window.history.pushState('page2', 'Title', '/page2.php');
    return false;

 </script>

【讨论】：

@Mi-Creativity 错过了它。谢谢。已更新。

不是你的错，在帖子里，我很抱歉

【参考方案2】：

添加return false; 使其不执行href，同时将return 添加到您的onclick 值：

<a onClick='return my_function()' href='/page2.php'> Click Here </a>
<script>
function my_function()
    window.history.pushState('page2', 'Title', '/page2.php');
    return false;

</script>

解决方法也解释here

【参考方案3】：

可能只是阻止锚标记的默认行为。对事件返回 false

<a onClick='return my_function()' href='/page2.php'> Click Here </a>
<script>
function my_function()
    window.history.pushState('page2', 'Title', '/page2.php');
return false;


 </script>

或使用阻止默认值：

<a onClick='my_function(event); ' href='/page2.php'> Click Here </a>
<script>
function my_function(e)
    window.history.pushState('page2', 'Title', '/page2.php');
e.preventDefault();

 </script>