I have an application that has a dashboard page. Different links on the dashboard page open as different browser tabs or windows based on the user's browser setting. Each new page/tab opened has a "Go back" button in the header. The application uses bootstrap framework for layout.
What I'm after is, on the new page, when a user clicks on the "Go back" button", I'd like the user to be taken back to the dashboard page/tab. (Please note, I'm not after loading the dashboard page on the current page.
Is this achievable? If yes, can I please request an example?
As you may have guessed from the comments, you can't do this (certainly not in any standardised, accepted and future proof way), and it's a good thing too as this could (and has been) abused in the past by advertisers and is generally bad practice.
As a general rule you shouldn't be hijacking the users expected behaviour of clicking on a link by opening it a new window/tab anyway. If the user wants it in a new tab, they can just right click the link and 'Open in New Tab'. It's only in rare cases that you should be forcing things to open in a new window.
Remember that when you force something to open in new window you are also breaking the expected behaviour of the back button. When someone clicks one of your links but suddenly realises they didn't want to be there, what's the first thing they'll do, hit the back button. But now it doesn't go back, they have to either click a link you've put in somewhere or close the new window, which they may not have noticed opening to begin with. Don't underestimate the usefulness of the back button, it's the users ejector seat. Break it at your peril.
In the example you gave us here
Different links on the dashboard page open as different browser tabs
or windows
I have just one question. Why? Do you have a very valid reason that the dashboard page can't be navigated away from? You've said you're putting in a 'go back' button, and the users back button will do that as well, so it's not like they're never going to get back to the page. Maybe the user has customised their dashboard in some way? In which case maybe considering saving their state using something along the lines of localstorage or cookies.
There could be any number of reasons you are wanting to achieve this, and they could be valid, but since you really can't maybe it's a good time to rethink some of your assumptions about how the UI should work. You could get help with UI questions over at http://ux.stackexchange.com
Related
I am writing a Single Page Application in JavaScript. The URL changes but there are no page reloads.
In my app I have a browser-like navigation with a back button, that actually runs window.back() . I also keep a backCounter variable (increased every time a user clicks on a link or goes back, listening to popstate) to make sure that the app back button doesn't let user go a blank tab.
I realise that ther are security implications when reading the history, and I have read answers here about it.
Question: is there a reliable way for me to know when the user has pressed "back" within the same SPA? I can think of two possible paths:
Neutralise. I could maybe neutralise the function of the back button by forcing a specific location on popstate
Integration. I would love to be able to know if the user has clicked on back or forward so that I can update backCounter accordingly.
...ideas?
I find myself in need of a script to (1) open a link in a new tab and (2) close the current tab so the back button cannot be used to see the website that was previously being viewed. This is a security feature for a site, and unfortunately I'm at a complete loss. Nothing I've tried works and I don't know where to begin. This is likely very simple and is staring me in the face, but I don't normally find myself needing to use java for anything. Any ideas?
Its impossible, but as found in this thread how to stop browser back button using javascript you can prevent users from going back.
Theres a JS bin with an example
Edit - Please bear in mind the warning 'It is generally a bad idea overriding the default behavior of web browser.'
Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"
I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.
What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">
How do I insert an entry into browsing history so back button goes to different page 1st click then original page on 2nd click?
So if you need a good explanation of what I want done, go to:
https://secure.exitjunction.com/howitworks.jsp
I just need a script that will allow me to insert an entry in the browsing history so when back button is hit, the user will be taken to my special page.
Here is a link to a jQuery Plugin:
jQuery Plugin
You can't directly manipulate the browsing history.
Such a feature would be seen as a security hole (and it would be), so I doubt that any browsers would ever implement it.
You might be able to hack around it however by doing something like this:
NOTE: This entirely hinges around the assumption that the referrer will get changed by the back button. I don't think this actually happens, so it more than likely won't work, but hey.
You have two pages, PageA and PageB.
The user hits PageA
The page (on the client, using javascript) checks the HTTP referrer, and if it is not PageB, then it immediately redirects the user to PageB.
Now that you're on PageB, if the user clicks the back button, it will go back to PageA.
PageA will check the referrer, it willmay be PageB, so there is no redirect.