change URL without reloading the page with

Question

For modify the URL without reloading the page we can use:

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

but if I try it with <a> element :

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

}
 </script>

It will not work, So how can I use <a> element and window.history.pushState() together? Like twitter and Facebook, user can click on the right button to open the URL in new window, and direct click to get pages and change the URL without reloading

`onClick='my_function()'` and `function my_fnuction()` ?? – Mi-Creativity Jan 08 '16 at 07:46 — Mi-Creativity, Jan 08 '16 at 07:46

void · Accepted Answer · 2016-01-08T07:47:07.457

5

In onclick you have my_function where as the actual function name is my_fnuction.
You need to cancel the default behaviour, If your onclick function returns false the default browser behaviour is cancelled.

Code:

<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>

edited Jan 08 '16 at 07:47

answered Jan 08 '16 at 07:44

void

36,090
8
62
107

@Mi-Creativity missed it. Thanks. Updated. – void Jan 08 '16 at 07:45
it wasn't your mistake, it's in the post, I apologize – Mi-Creativity Jan 08 '16 at 07:46

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

add return false; make it so that href is not executed, also add return to your onclick value:

<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>

solution is also is explained here

edited May 23 '17 at 12:23

Community

1
1

answered Jan 08 '16 at 07:44

gurvinder372

66,980
10
72
94

score 1 · Answer 3 · answered Jan 08 '16 at 07:48

Probably just preventing the default behavior of anchor tag. Returning false to the event

<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>

Or using prevent default:

<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>

change URL without reloading the page with

3 Answers3