dcsimg
www.webdeveloper.com
Results 1 to 15 of 15

Thread: browser history manipulation ?

  1. #1
    Join Date
    Mar 2004
    Posts
    369

    browser history manipulation ?

    I've written a demonstration application for a client that loads a single page and then, like facebook or gmail, loads various regions of the page using Javascript. There's no AJAX yet but that's the basic idea. Unsurprisingly, the client has asked that the back button in one's browser take one back through my application as opposed to unloading the page and going to the previous PHP/HTML page, thereby unloading my page entirely.

    I understand that one can use history.js which is the self-described successor to jQuery History. Unfortunately, this page doesn't provide much introductory material to describe how the tool can be used. I've tried reading the test scripts but I haven't had much luck penetrating the concept yet. I've also googled for "history.js tutorial" and the top results are all asking the same question I am asking here. Can anyone help me get a grip on this? For instance, why would one want to use pushHistory versus replaceHistory? What are some use cases and standard techniques?

    Alternatively, I have located what appears to be the original history plugin which also insufficiently documented.

    Has anyone done this sort of Javascript before? I want to integrate this into my app before I start adding any more features.

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131

  3. #3
    Join Date
    May 2010
    Posts
    213
    (deleted my post, i didn't read the whole original post before i replied, i apologize)
    Last edited by 3Nex; 12-31-2011 at 08:01 AM.

  4. #4
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by JunkMale View Post
    Um, no. I provided links of what I'm talking about. Just doing history.back() is NOT what I am trying to do. I'm trying to alter the browser history as people navigate my application so that when they click the back button, it takes them through difference stages of my app.

  5. #5
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    The one link is to jquery something or another. I would ask for help in those forums, jquery is not javascript, it is a javascript framework that is written in javascript and allows rapid development of a site with little knowledge of JS needed or so they will have you believe.

    So, not a JS issue, a JQuery problem.

  6. #6
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by JunkMale View Post
    The one link is to jquery something or another. I would ask for help in those forums, jquery is not javascript, it is a javascript framework that is written in javascript and allows rapid development of a site with little knowledge of JS needed or so they will have you believe.

    So, not a JS issue, a JQuery problem.
    I don't mean to be disprespectful, but I don't get the feeling you have read my question very closely. The basic idea is that I have a javascript problem: I want to manipulate the browser history object so that the back button will take a user to prior stages in my web app rather than navigating to an entirely different page. I have not yet chosen a framework and was asking the community for advice on doing this sort of thing. Am I wrong to think this is a job for Javascript?

    HTML5 offers the History API as demonstrated here, but HTML5 support is still being rolled out so I was hoping to use a framework to spare myself the extra labor of chasing down browser quirks.

  7. #7
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    To manipulate the browser history, you need to access the document.history object. Simple as.

    Javascript is not like HTML, HTML is stateless where as JS isn't and to properly do this, your going to need to use cookies and store data states between pages or store some kind of audit trail in something like a cookie.

  8. #8
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    If the application goes to another page with clicks, then the history will reflect that.

    If the application does NOT go to another page with clicks, then the back button will take the user to the previous page. If this is the case, then the best idea is to provide your own "<PREVIOUS" and "NEXT>" buttons for the application, and keep track inside JavaScript.

  9. #9
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by JunkMale View Post
    To manipulate the browser history, you need to access the document.history object. Simple as.
    I disagree that it's simple and that's why I'm posting. Perhaps try reading on how browsers implement history differently. Or, if it's as simple as you say, then perhaps you could provide a bit of Javascript that shows how I can use Javascript so that the back button will navigate to a previous state in my *Javascript* app rather than moving to a previously loaded HTML/PHP page. This is my original question and I think it's pretty clearly in the domain of Javascript. If you don't like jquery, fine! I would appreciate some bog-standard Javascript. Hopefully something a bit more attuned to my question than our prior misfires here.

    Quote Originally Posted by JunkMale View Post
    Javascript is not like HTML, HTML is stateless where as JS isn't and to properly do this, your going to need to use cookies and store data states between pages or store some kind of audit trail in something like a cookie.
    Perhaps I was unclear about the nature of my app so far. I don't think cookies will be necessary because I don't need to preserve application states between page loads. I merely want to get the back button to call Javascript for a given load of an html/php page.

    For example
    1) User loads problem.php
    2) User clicks buttons, types text, etc. Javascript in the page responds by showing/hiding/altering classes/etc. in very distinct phases. None of these actions cause a new page to be loaded in the browser.
    3) User clicks back button. Rather than unloading problem.php and going to some previously loaded page, I want to show/hide/alter my page elements to show a prior phase of the application.

    The application is more or less entirely in Javascript at this point. If the user navigates away from my page and returns later, I don't care about remembering what they did on the prior visit. I only care what they have done since they most recently loaded my page.

    Any help would be much appreciated.

  10. #10
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by WolfShade View Post
    If the application does NOT go to another page with clicks, then the back button will take the user to the previous page.
    This is not strictly true. An anchor is the most trivial example. If you have manipulated the history object, you can prevent this and that is precisely what I'm trying to accomplish.

  11. #11
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Hi, sneakyimp. This is solved by changing the URL hash. Changing the hash leaves you on the same page, but creates a new history point.

    It gets a bit messy. The newer browsers have a built-in hashchange event. For older browsers, you'll need to regularly poll the hash for changes. And for older IE browsers, you'll need to bring an iframe into the mix. This is a case where you definitely want to use a library that's been widely used and widely tested, that handles the crossbrowser issues transparently, and that provides you a single and simple interface.

    There are several plugins to choose from, but I think the Ben Alman jQuery hashchange plugin is your best bet. On that page, you'll find links to full documentation as well as examples.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  12. #12
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Quote Originally Posted by WolfShade View Post
    If the application goes to another page with clicks, then the history will reflect that.

    If the application does NOT go to another page with clicks, then the back button will take the user to the previous page. If this is the case, then the best idea is to provide your own "<PREVIOUS" and "NEXT>" buttons for the application, and keep track inside JavaScript.
    No, you use the page location as the marker in a cookie.

    If this was HTML then you would be using the history object and you can use it to track your HTML path but your using JS which means you can use the forward and back buttons and will need to trap them, then retrieve the data from the cookie then fire up the browser.

    All script variables would need to be stored and retrieved from a cookie for that specific page and user.

    It will take some work but you have some generic functions that can be easily found that will allow you to manipulate cookies.

  13. #13
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by Jeff Mott View Post
    There are several plugins to choose from, but I think the Ben Alman jQuery hashchange plugin is your best bet. On that page, you'll find links to full documentation as well as examples.
    Bless you, Jeff. I have been working with history.js which is recommended on this mozilla page on the history object. I've got some things working but am completely unsure which event to use (anchorchange, statechange, hashchange, popstate) because some of them fire twice and others not at all depending on whether i use a hash (#) or not and myriad other factors. The documentation is not especially helpful and there appears to be no real community yet to support it.

    I've looked at the Ben Alman example and it looks mercifully simple but the examples don't show any direct manipulation of the history.pushState or replaceState methods so I'm still trying to determine what refactoring my code might need to make use of this stuff.

  14. #14
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    In place of any pushState calls, you would instead set the hash: location.hash = 'new-state';. And you can add data to the hash pseudo URL as well: location.hash = 'new-state/' + someData;. In Gmail, for example, when I'm viewing a message, the hash is something like #inbox/7774dc3db97c1349.

    Also, you won't always need to set the hash through JavaScript. A regular link will do the trick too. <a href="#new-state/7774dc3db97c1349">View</a>
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  15. #15
    Join Date
    Mar 2004
    Posts
    369
    Quote Originally Posted by Jeff Mott View Post
    In place of any pushState calls, you would instead set the hash: location.hash = 'new-state';. And you can add data to the hash pseudo URL as well: location.hash = 'new-state/' + someData;. In Gmail, for example, when I'm viewing a message, the hash is something like #inbox/7774dc3db97c1349.

    Also, you won't always need to set the hash through JavaScript. A regular link will do the trick too. <a href="#new-state/7774dc3db97c1349">View</a>
    Excellent info! Thanks so much. This sounds very promising and I think will be enough to get me over the hump to complete this demo. As a more long-term consideration, I've heard noise about how it's bad to have one's web app depend on javascript for navigation because it degrades poorly (you gotta have javascript for it to work!) and search engines can't crawl it. B. Lupton offers some discussion which seems intended for those already acquainted with the issues. I expect I'll need to understand those issues sooner than I'd like.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles