Develop Reference

is it possible to use retrieving history (or document state) as a navigation in browser?

I'm worrying that I won't get any reply from stack overflow, because I couldn't get any reply from previous question. You don't need to fully read previous question, but It could be helpful to understand my question.
Our company is on service that html document builder(windows application) and I'm a desktop s/w engineer. after build html document with our windows app, we export all things to html/js/css.
Consumer of our application is a designer who creates or edits contents via our windows app. and the end-user of contents which is created by designer see contents via browser(chrome, safari (iphone), samsung browser).
The Problem is, my superior (programmer) wants use java-script as a navigation, this is possible. but, he want to save all state of document state before navigation, so after navigation to any page and then comeback to origin page, all state - animation (contents may have animation) and all script state - should be same exactly before he leaving origin page.
More specifically, main html has a iframe, and iframe can shows all contents. Main.html have a navigation button so iframe can navigate all contents created by designer. If user interacted with page1.html inside iframe, then make iframe to change its content to page2.html by clicking navigation button (go to second page button implemented inside main.html but outside of iframe). and then back to page1.html, he get exactly same state as before he leaving page1.html.
At a glance, It seems quite possible just implement go-forward or go-backward, but dynamically paging navigation is impossible to me. I found some techniques - access browser visit history and window.history object, but It seems there isn't user-defined way.
I thought Electron app(desktop) will be fine for our solution, but my superior says It should be works well with just html/js/css. Our final product should be shown in desktop, iPad, mobile or any device that handle web browser.
I need technical advice to accomplish this issue, I'm fine there is no way to control navigation while saving document state. Help me please.

Document state can be saved by using localstorage object in javascript.

How To Change Page URL With JavaScript

I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.
I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.
Thanks in advance for your help!

what you are seeing is a single page application
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
It will be achieved by using certain JS frameworks. AngularJS is the popular one.

Try this:
window.location.href="/yourUrl";

HTML5 introduced the history.pushState() which allows you to add and modify history entries.
window.history.pushState('page1', 'Title', '/page1.php');
This might worth looking.

There's 2 main ways to redirect a user, each with it's tradeoffs:
You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:
history.pushState({}, "page 2", "/page2");
will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.
As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.

How to navigate back in a modern web app

I've seen a few web apps lately that by clicking buttons change the content and effective state of the page. Then they have links to navigate to another part of the app. Sometimes I'd then like to go back by pressing the browser back button, and I expect the page to be in the state it was when I left. But I often see the content from when I first entered that page.
What's a good way in a modern web app to architect the navigation so that back button returns to you the previous (last) state of the page.

This article may have some answers. It details how to use HTML5's pushState and popState to maintain state in an web app when forward/back are used, without fully refreshing the page.
http://diveintohtml5.info/history.html

Am not sure what u mean by "modern", but you might wish to check this discussion here (about how manipulation of browser history might be controlled and why [it's not evil sometimes]), and also look into this jQuery plugin (for hashable history and state).
And for a related SO Question : check this

I suppose you are referring to a dynamic one page app, powered by AJAX.
You can use the new PushState() and replaceState() methods of the history object, which are supported in most modern browsers (inc. IE10), and allow you to manipulate the browser's history without triggering a page refresh.
This allows you to attach an object to the state, which will be available to you once an onpopstate event has been triggered, that is, when the user presses back or forward in his browser.
once the object has been passed you can manipulate the page accordingly. e.g. you can pass a unique ID for a post, and load it with AJAX.
You can read more about it in Mozilla Developer Network

How to navigate a website using AJAX?

I have seen that navigation in Google+ isn't normal navigation as in other sites. Many elements remain the same, and I am sure it isn't a
$('body').load()
or something like that because the page actually reloads and the URL changes.
Can anyone explain to me how it's done?

It is using AJAX. And with that, it is also using the History API.
The History API allows you to control the history of the browser, changing the URLs to change the state of the website. Each state is a different URL. The only drawback is that it's not supported on older browsers, on which it fallbacks usings hashbangs (it appends #foo/bar to the URL).
So it uses some kind of $('body').load(), except it doesn't use jQuery.

There are many way to achieve this you need ajax/Jquery usually.
$('#randomdiv').load('load.php');
This loads load.php generated html in div randomdiv

Append to URI/URL live without refreshing the page location with JavaScript/jQuery

What I have is a MVC framework that I am manipulating the DOM via JavaScript and jQuery. Which to a point is a mute reference to this question. Through the MVC if I go to
domain.com/page/
I land on a default page with recent info, updates, etc. However through the MVC if I go to something like
domain.com/page/ref1/ref2/ref3
We can handle that on the backend to do what we want. When its gone to directly. So the thought here for this question is, can I mimic the behavior cross browser up to at least up to IE 6/7+, Firefox 3.x+, Chrome. And by mimic I mean manipulate the URL/URI like I would the DOM itself. This way when someone comes along and navigates to sections via the methods we manipulate the DOM and find something they want to share all they have to do is go up to the browsers URL bar, and then copy and paste it to a message.
What would be even nicer is a method that can work with the back and forth history buttons on browsers as well. All without having to reload/refresh the page.

have you tried
window.location.replace(URL)
This function doesn't load any pages.If you change your current location like this , when you redirect to somewhere , your last address will be the non-modified address.It doesnt write new URL to the browser history.So it would be like as if you just give the key to what the user wants to share.

Have you considered modifying the anchors in the URL? While on this page:
http://www.google.com/
Changing the URL to this:
http://www.google.com/#foo
... won't trigger a page refresh. So you could use (read/modify) the contents of the URL after the anchor all you want and the page won't get reloaded. Should be able to build on that idea.