I am following the below article
In the above article, all the pages are lies within same domain. But in my case I am having all the different urls. Therefore I would need to update complete URL from address bar without reloading it.
I have tried the article sample above and got the error as:
Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://www.google.com/' cannot be created in a document with origin 'http://localhost:50452' and URL 'http://localhost:50452/dummy.aspx'
on below line
history.pushState(obj, obj.Title, obj.Url);
below is my code: HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Dashboardfiles/jquery.min.js"></script>
<script src="Dummy.js"></script>
</head>
<body>
<form id="form1" runat="server">
<button id="Submit1">Google</button>
<button id="Submit2">ASP snippets</button>
<button id="Submit3">Microsoft</button>
</form>
</body>
</html>
Dummy.js
$(document).ready(function () {
$('#Submit1').click(function (e) {
e.preventDefault();
ChangeUrl('Google', 'https://www.google.com/');
});
$('#Submit2').click(function (e) {
e.preventDefault();
ChangeUrl('ASP Snippets', 'https://www.aspsnippets.com/Articles/Change-Browser-URL-without-reloading-refreshing-page-using-HTML5-in-JavaScript-and-jQuery.aspx');
});
$('#Submit3').click(function (e) {
e.preventDefault();
ChangeUrl('Microsoft', 'https://www.microsoft.com/en-in');
});
});
function ChangeUrl(title, url) {
if (typeof (history.pushState) != "undefined") {
var obj = { Title: title, Url: url };
history.pushState(obj, obj.Title, obj.Url);
} else {
alert("Browser does not support HTML5.");
}
}
