Member Avatar for pro-tek

How to update address bar with new URL without reloading the page?

  • 4 Contributors
  • 3 Replies
  • 1K Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

This thread asks how to change the browser address bar without a full reload. started the question, warned that changing the URL is only appropriate when the new URL will deliver the same content if visited directly, posted a client-side example, and raised the bookmarkability point. Below are concise, AngularJS-focused steps and practical cautions that build on those replies.

Enable HTML5 mode and set a base href so the browser uses real paths instead of hashes:

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);
<!-- in index.html head: <base href="/"> -->

Change the URL from Angular code and optionally avoid adding a history entry; also handle location changes to restore UI state:

$location.path('/new/path');            // pushes a new history entry
$location.path('/new/path').replace();  // replaces current history entry

$rootScope.$on('$locationChangeSuccess', function() {
  // rehydrate view based on $location.path() and $location.search()
});

Cautions and quick checklist:

  • If URLs must be bookmarkable/shareable, configure the server to return the app shell for app routes (e.g., nginx try_files to index.html) so direct loads work.
  • Client-only meta tag changes are unreliable for social previews and some crawlers; use server-side rendering or a prerender step for SEO/share previews.
  • Test back/forward behavior and confirm base href, router config, and console errors when changes unexpectedly trigger reloads.

Recommended Answers

All 3 Replies

Member Avatar for jkon

The short answer is quite simple , google “History js” , the real answer is never alter the address bar url IF you are going to provide different content from what anyone would get by entering the url you are changing to. When I mean that all content should be the same , I mean ALL content (including meta tags , and everything). Otherwise is like mocking your visitor (if anyone don't care about his / her visitors luckily search engines do)

Member Avatar for shaik123

u can use this code

Example :
 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }
Edited by pritaeas because: Removed fake signature.
Member Avatar for Member #120589

Give an example of what you want and why you wish to do so. This could be meaningless. Would these changes be bookmarkable, and if so would they provide specific content different to the original, if you entered the new url manually?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.