Browser reload/refresh stay on current scene

Scenes
1

I am working on my new website that is made up of several scenes. My only concern about it is if someone reloads the web browser in one of the scenes, it will then take them back to the “homepage” or main scene. Is there a way or code that when or if they click on the reload/refresh button they stay on the current scene?

2

You would need distinguish between a navigational click and a browser reload.

A nav click to go to another scene will trigger an onload event.
Reloading the browser will trigger an onload event.

You can distinguish easy enough by having the clicks trigger a function which set a global bool variable.
Thats the easy part. But when your browser reload syou will loose the global vars so you most likely will need to use window.sessionStorage to store the current scene.

All this can be done, and off the top of my head here is an example.

reloadscene.hype.zip (34.1 KB)

A simpler way is to run javascript that sets the page address to the scene name as a anchor '#'

Then all you need to worry about is what scene names to use. The browser will naturally reload the current scene because it is reloading aa anchor.

The Tumult team have posted a simple way of doing this.

The first section on that page Linking to a Scene using an URL is the part you want.
Testing it it works well.

3 Likes
3

Thank you for the reply. I will play around with the anchors, and javascript a bit. What you said makes sense.

4

Hi Mark

Thanks a lot for sharing this example. It’s very useful and I would like to use it in one of my projects, However, I’m trying to understand the code behind it and would appreciate if you shed some light on that the code actually does.

So there is an if/else statement in the head html of the document which checks if any scenes have been recorded and if not it shows the first scene on first load. Is that right?

Then there are three other functions:

First Load is run on first on-scene load and Current Scene Load is run on every scene on-scene load but I don’t really know what they do.

Finally, the Csene Button Clicked is run whenever the next scene button is clicked and I also don’t really know what it does.

Thanks for your help!

5

Correct.

No, it sets the global var value to the name of the first scene, ready to use later.

The head code is the first code to run.
It is checking to see if any value is stored in the sessionStoarge. If not then for now just store the first scene name in a global var that we can access later.

--

When the first scene is loaded, we run the firstLoad() function.
This function is only run from the first scene.

	 //-- Check if value is equal to current scene name.
 if (window.currentSceneName != hypeDocument.currentSceneName()) {
	
	///if not equal to current scene name - then also check if we got here by a button being click.
	if ( !window.buttonClicked   ){
	
	//-- if Not here by button click then likely was by reload. So we instead load the last stored scene name and go to it
	hypeDocument.showSceneNamed(window.currentSceneName)
	
	
	//-- we reset window.buttonClicked just to be safe
	window.buttonClicked = false;
	
	}

We then run the currentSceneLoad() function from the first scene. ( and all other scenes when they load )
This gets the current Scene Name and stores it in the global var window.currentSceneName and the sessionStorage

//-- get and store the current SceneName in the global var and the sessionStorage
 	
    	window.currentSceneName = hypeDocument.currentSceneName();
    	window.sessionStorage.setItem('currentScene',  window.currentSceneName);

The sceneButtonClicked() function is called each time a button is clicked.
And set the global var window.buttonClicked to true;

2 Likes
6

Thanks Mark!

7

Hi Mark

Would it be possible to tweak this code so that the scene names are stored permanently in local storage so that users are taken to the last scene they left even after closing the browser?

Looking forward to your reply.

Greg

8

Did you get this sortted…

9

Hi Mark

Yes I did some digging and found a great example by DBear where scene names are stored in local storage.

scene-localStorage.zip (91.9 KB)

3 Likes