What is the mechanism behind the functionality of the back button on beautyoftheweb.com?

I've been searching for javascript hooks that work with the back button on web browsers. However, most of them only support navigation between hashed URLs. This means that you can only go back and forth between www.mysite.com#page1 and www.mysite.com#page2. If you click back and the URL changes to something without a hash, these hooks do not function properly. For example, check out this link: . Try clicking on a tab and then going back - it won't work.

However, on , they have found a way to make the back button work seamlessly between hashed and non-hashed URLs. Do you have any idea how they achieved this?

Answer №1

Are you absolutely certain? I'm currently detecting a hash:

http://www.beautyoftheweb.com/#/highlights/all-around-fast
                              ^-- this spot

But let's assume there are URLs out there that don't contain them: What kind of issues are you encountering elsewhere? In my private network application, I utilize Really Simple History for managing history, and one can effortlessly navigate back and forth between URLs regardless of whether they have the hash, are app URLs without the hash, or completely different page/app URLs. (Even if you bookmark pages with hashes, the app will return to the correct location when revisiting.) This works in my app by checking the initial hash on load and reloading the state as necessary. (I do not depend on — or even utilize — RSH's data storage feature, just the hash manipulations.)


Edit I just tested out the live demo of the first jQuery history plugin I stumbled upon quickly. It managed going back and forth between "hashed" and "unhashed" URLs seamlessly. I visited the "#2" link, then modified the URL in the address bar to remove the hash entirely and hit Enter. This brought me to the correct page. Then clicking Back took me back to the "#2" page successfully. In fact, if you go here, I am directly linking to the "#2" link, and it loads its state appropriately. I believe you may be experiencing some inexperienced use of history libraries where the developer hasn't handled the initial loading process adequately.

Answer №2

It appears that the URLs follow a consistent pattern:

http://www.beautyoftheweb.com/#/<something>
. For instance, you can see this format in action with links like , indicating that hashes are being utilized across all URLs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Dynamic Bar in Your Shiny Application: A Step-by-Step Guide

Currently, I am developing a unique crowd funding shiny app to monitor donation amounts. Is there a method available that allows for the creation of a reactive bar in Shiny? Alternatively, is it feasible to achieve this using html, css, and javascript? He ...

I seem to be overlooking a key element in utilizing a variable from one function within another. Can someone point

I am facing a little difficulty with something that might seem simple. It seems like the alert is not working in the second function. Can you help me figure out what's wrong? function func1() { var test = 5; var testAgain = 8; } function func3( ...

Filter the ng-repeat in Angular based on the model's value

Within my "Saving" model, there is a field called "Retailer". I want to implement an ng-repeat directive that displays only items with the same "Retailer" value. Essentially, I am attempting to rectify this issue. <div ng-repeat="saving in savings | ...

Ruby On Rails: Dealing with Partial Page Loading

As a newcomer to Ruby on Rails, I'm struggling to find answers to an issue I'm facing in my web app. After a few clicks in my development environment, some pages stop loading data abruptly without any error messages in the console or Firebug. The ...

The express route parser is incorrectly detecting routes that it should not

I am encountering an issue with the following two routes: router.get('/:postId([0-9]*)', handler) router.get('/:postId([0-9]*)/like', handler) The first route is intended to only capture URLs like /posts/4352/, not /posts/3422/like. ...

Could Object attributes be incorporated into C#?

When working with JavaScript, it's pretty straightforward to create a new object and set its attributes. For example, if I want to set an attribute of an object, I can simply do `objectName.attributeName = whatever`. However, is there a way to achieve ...

Format the date using moment() for the last week of the current year and return it with the year. Next year's

I encountered an unusual problem when using Moment.js with Angular.js. When I use the .toISOString() method, I get the correct date, but when I use the .format() method, the date is completely wrong. Here is an example to illustrate the issue: Code snip ...

Refining an object by using a parent key as a filter criterion (JavaScript)

Refined JSON Data Check out this unfiltered JSON object that I am working with: info = [ {id: 1, name: "home", parent: 0, active: 1, order: 0}, {id: 2, name: "dashboard", parent: 0, active: 1, order: 1}, {id: 3, name: & ...

A comprehensive guide on effectively monitoring Form Abandonment in Google Analytics using jQuery or JavaScript

Is it possible to accurately track "Form Abandonment" in Google Analytics using jQuery or JavaScript? This method can help generate reports that display how far users progress through form filling before exiting or failing to submit. Are there more effect ...

What is the process for transferring data from a Firestore collection to the Vuex State in

My objective is to integrate a firestore collection with the Vuex state in order to utilize it across multiple pages. I attempted to follow this guide: How to get collection from firestore and set to vuex state when the app is rendered? After following ...

Sinon.js: spying on an empty callback

Currently, I am experimenting with callback functions using sinon.js handleLoginActions = function (callback) { ... if (callback) { callback() } .. } var loginCallbackStub = stub(); handleLoginActions(loginCallbackStub); expect(lo ...

Unusual characteristics found in a select list controlled by Angular

The article titled "How to set the initial selected value of a select element using Angular.JS ng-options & track by" by @Meligy served as my guide while working on implementing a select list (ng-options). Despite achieving the desired basic functional ...

Accessing the req object in Node.js using Express

Currently, I am attempting to redefine the function send in order to include an express-session value with each response. Unfortunately, I seem to be encountering issues accessing the variable req within the definition of send. 01| let app = express(); 02| ...

The characteristics and functions of the THREE.TransformControls

I've been attempting to utilize transformControl in my program, but due to the lack of documentation on controls at threejs.org, I find it challenging to tap into its full potential. I'm seeking information on all the properties and methods provi ...

I wish to adjust the font size as well as resize the table elements simultaneously

Adjusting the height and width of the table should automatically adjust the font size as well. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Default functiona ...

How come the useState hook is affecting a different state?

I have an array of data stored in the initial state as targets and another one as dataBaseTargets. My goal is to modify the value of targets without affecting the value of dataBaseTargets after a single useEffect call. However, I am facing an issue where c ...

The function 'downloadFunc' is not recognized as a valid function within the context of ReactJS custom hooks

Here is a unique custom hook that triggers when the user presses a button, calling an endpoint to download files as a .zip: import { useQuery } from 'react-query'; import { basePath } from '../../config/basePath'; async function downlo ...

the attempt to substitute an image with a canvas is unsuccessful

I attempted to utilize a function that transforms images into canvas elements. In my approach, I aimed to swap out the generated canvas with the corresponding image by using jQuery's .replaceWith() method, but unfortunately, the process did not yield ...

A step-by-step guide to thoroughly examining the form status in a React application, allowing for the activation of a previously disabled submit button

When I have an onChange event in React, the state is populated correctly. I disable the form button when a field is empty on submit, but I also want users to be able to go back and fill out those fields. The key issue is that if both fields have data, I wa ...

Arrange the text inputs into an array using React Native

This app aims to store TextInputs and color state in an array called listPeople by clicking the Button below using the submitItem function. The TextInputs include name and lastName, which are obtained from the component, and color is retrieved from this.pr ...