I am following the below article
Change Browser URL without reloading (refreshing) page using HTML5 in JavaScript and jQuery
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.");
}
}
