So I'm attempting to write a script that will load content dynamically so that the page doesn't ever have to be refreshed (the main content will be replaced, but the sidebar, header, footer, etc., will remain in the same place). I've gotten my event firing, and I'm using pushState() to update my URL. However, I can't figure out how I should use the window.history.back() and window.history.forward(). Would I have to redefine those two functions in order to get it to successfully travel?
Though pushState() is history, you need to pass the URL so that the page will load without refreshing it.But windows.history.back() will take you the last page accessed from browser cache automatically.Here you not passing any URL.And the same is applicable to windows.history.forward() as well.
The easiest way I've found to do what (I think) you're after is to hook up your dynamically loading-ness to your window.location.hash, so:
window.location.hash='page_1';
You can then bind an event handler to the hash change and go AJAX down page 1.
Changing the hash causes a new history page, so you don't have to do anything with window.history at all.
You are using PushState to update URL, so your history is already handled for you in all browsers that support that functionality.
But older browsers do not support PushState, you might have to test
if (history.pushState) { //is supported }
I recommend that you use the History.js script here. It will revert to using the old onhashchange functionality, for HTML4 browsers and pushState for HTML5. You will not have to deal with history.forward manually.
On a side-note, Also, you do need to configure your .htaccess, so that bookmarks and page-links of your website work correctly.
Detailed Guide
Related
I am attempting to develop a Chrome extension that injects an Angular application into the user's browser window in order to make an interactive sidebar. I have mostly been able to achieve 100% of what I want by adding an iframe to the page through a content script and setting the frame's source to an html file inside my extension directory.
Unfortunately, because the Angular application has multiple routes (allowing the user to login and see many different types of information), I have found that it is interfering with the user using their back/forward buttons as expected; as the iframe's source changes due to the hashes changing, it saves a new entry to the history.
I cannot seem to find or create a workaround for this; is there some clever way to make either Angular not generate historical entries, or to achieve the creation of a sidebar that doesn't save to history without using an iframe, or to disable an iframe from saving to the history?
Ultimately, I had been attempting to write a chrome extension embeds an angular application inside of an iframe, but found that all the hash changes caused interference with Chrome's history because the iframe source was constantly changing due to routing changes.
While I cannot say for certain if using ui-router instead of angular router would allow me to circumvent my issues (it seems as though ui-router uses states, and does not necessarily require a url change, though I may be wrong), I've determined that the root cause is the changing of the iframe's source and that there was only one way to cause the iframe to not be recorded in the history at all: to leverage the window.location.replace function instead of changing location directly.
The following steps were taken in order to ensure that my iframe does not interfere with Chrome's history at all:
Set the src of the iframe to '#' before appending to the currently existing document
Append the iframe to the document
Access the iframe's content window directly in order to use the frame's location.replace function in order to update the location without saving the history:
$("#myIframe").get(0).contentWindow.location.replace(myUrl);
All code inside the iframe to change url is accomplished through use of location.replace(url)
The redirects inside of angular are handled as such: $location.path(newPath).replace() so that angular uses the same tactic.
A better solution would be to figure out how to use $location.replace() all the time by default, which I am attempting to implement now. So essentially, this all boils down to: location.replace will allow you to have an iframe's source change and not save to history.
I was browsing thought GitHub today and noticed that the individual repository navigation doesn't use hash-bangs in the URL /#! or /# and the back button still works. How do you think they are accomplishing this? How does this affect search engine crawling from Googlebot? I know it looks for # in the url.
I'm really quite curious as I know using /# is quite debatable.
Here's an example: https://github.com/mirah/pindah
Thanks!
They blogged about it a while back:
https://github.com/blog/760-the-tree-slider
The effect is implemented history.pushState() function and handlers on the popstate event — both a part of the HTML5 DOM interface in some browsers.
Clicking the link uses pushState() to update the location and load new data into the page without reloading the whole page. Handling popstate makes the back button work correctly.
The GutHub blog calls their particular usage the “Tree Slider” (it loads the content for tree members and visually slides it into place). The effect and its implementation was described on the GitHub blog.
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
I am making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.
How do I change the browser URL (or URI) without a page refresh using HTML5 and HTML5Shiv for IE? For instance if I am on the page http://www.example.com and I want to go to http://www.example.com/4f6gt without having to reload the page. I understand how to load the content with AJAX, I have been using AJAX for a while now, but I am new to the HTML5 point of view for this. The reason I wanna do this is because I wanna be able to have people navigate pages without the time it takes to reload the DOM of the main page, but have a deep link that they can also go to so they have a one step way to get back. Thanks!!
Check out pjax or history.js
It's not going to work in < IE9, because IE doesn't support html5 history api (history.pushState() and history.replaceState()). The shim won't help. Should work in IE10.
Both those plugins degrade gracefully. History.js can also degrade with a hashbang to support dynamic content loads.