back button to first visited page - javascript

Apologies if my question sounds like a newbie question...but I could not find an appropriate answer.
I am trying to create 2 back buttons on my website that would bring the visitor back :
1. to the very first page he visited on my website
2. to the previous site (not page) he visited - so the site that brought him to my site basically.
Is this feasible by any chance ? And if so, can you please share your insights on the way to do it ?
Many thanks in advance for any help !

Maybe you can do something like this:
$(document).ready(function() {
var sessionIsNew = sessionStorage.getItem('sessionIsNew');
if (sessionIsNew == null) {
sessionStorage.setItem('sessionIsNew', 'false');
sessionStorage.setItem('entryUrl', window.location.href);
}
}
// On click to your back button:
function backToEnrtryPage () {
entryUrl = sessionStorage.getItem('entryUrl');
if (entryUrl != null) {
window.location.href = entryUrl;
}
}
More information about session in JavaScript
https://developer.mozilla.org/de/docs/Web/API/Window/sessionStorage

You can do it by manupulating the browser history, so to move once backward through history, just do:
window.history.back();
to back to initial entry page you can do somting like
var numberOfEntries = window.history.length;
window.history.go(- numberOfEntries );
the full api documentation from mozilla : https://developer.mozilla.org/en-US/docs/Web/API/History_API

Related

JS redirect according to user agent?

I'm sorry if that question is obvious to solve, but I don't know JavaScript yet but feels like it's the only way to implement what my clients need for their website.
I want to redirect users with specific browser to the specific simplified page once they visit homepage and keep this redirection work everytime they click on homepage button. Basically what I want is a 301 redirect based on user-agent. I've tried many times but all I've got was an infinte redirection loop or no result at all.
function get_ya_browser(){
var ua = navigator.userAgent;
if (ua.search(/YaBrowser/) > 0) document.location.href='redirect-link.html';
return '';
}
How could I change this code to work? Would really appreciate any help.
Try - document.location.replace ='redirect-link.html';
instead of document.location.href ='redirect-link.html';
.location.replace() simulates a HTTP redirect
.location.href() simulates a mouseclick
If the code was part of redirect-link.html && ua.search(/YaBrowser/) !== -1, you will get an infinite loop.
following code solved this problem:
function get_ya_browser(){
var ua = navigator.userAgent;
if (ua.search(/YaBrowser/) !== -1 && !location.href.includes('elbrus-m-zakaz.ru/home-page-windows-xp/')) {
document.location.href='//elbrus-m-zakaz.ru/home-page-windows-xp/';
}
}

Attempting window.location or window.location.href redirect which is causing a loop

I'm attempting to use javascript to determine if the user is using a certain language and if they're not using english then for the page to load a different page BUT with the params of which I've grabbed from the url.
I have been able to load the page with the params but I keep falling into a loop reloading the page, even after skimming through the countless other examples, such as: this or this.
function locateUserLanguage() {
var languageValue = (navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage)).split('-');
var url = window.location.href.split('?');
var baseUrl = url[0];
var urlParams = url[1];
if (languageValue[0] === 'en') {
console.log('no redirect needed, stay here.');
} else {
// I tried to set location into a variable but also wasn't working.
// var newURL = window.location.href.replace(window.location.href, 'https://www.mysite.dog/?' + urlParams);
window.location.href = 'https://www.mysite.dog/?' + urlParams
}
} locateUserLanguage();
I've attempted to place a return true; as well as return false; but neither stop the loop.
I've tried window.location.replace(); and setting the window.location.href straight to what I need, but it's continuing to loop.
There is a possibility that the script in which this function is written is executed in both of your pages (english and non-english) on load. So, as soon as the page is loaded, locateUserLanguage function is executed in both english and non-english website causing the infinite loop.
You need to put a check before you call locateUserLanguage function.
Suppose english website has url = "www.myside.com" and non-english website has url "www.myside.aus". So the condition needs to be
if (window.location.host === "www.myside.com") { locateUserLanguage() }
This will make sure that locateUserLanguage is called only in english website.
Or other apporach can be to load this script only in english website which will avoid the usage of conditional statement.
Hope it helps. Revert for any doubts.

How do i make a redirect a iPad user?

This has probably been answered before but i don't understand al the difficult research online so i ask it here And hope for a easy answer
<script type="text/javascript"> // <![CDATA[
if ((navigator.userAgent.indexOf('iPad') != -1)) {
location.replace = "http://www.joey-games.byethost4.com/games/";
} // ]]>
This does not redirect me.
var isiPad = navigator.userAgent.match(/iPad/i) != null;
//or by using
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua)
You can find other related information in the following links:
http://fellowtuts.com/jquery/ipadiphone-detection-using-javascript/
Detect iPad users using jQuery?
Instead of using location.replace use location.href
Your snippet becomes
if (navigator.userAgent.indexOf('iPad') > -1) {
location.href = 'http://www.joey-games.byethost4.com/games/';
}
I've made two changes to your code
!= to > in the if statement which is no biggie (nothing relevant)
changed method call from replace to href Taken from MDN
The Location.replace() method replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.
This basically says that if you use replace you cannot use the browsers back button to get to this page anymore, basically reducing the users user-experience since they'll get confused about what the back button does when they use your website.
This will redirect your users on the iPad to a different website however, you shouldn't do this - it's bad for your users and your website. (as partially explained above)
Iam Not gonna use The redirecting to go to "Joey-games.byethost4.com/games/" I wil redirect iPad users to: Joey-games.byethost4.com/mobile/iPad/ for a mobile site since flash player is not supported in safari yet

How to restrict user to navigate back to previous pages and refresh?

Currently I am trying to build a website using ASP.NET MVC5.
I am stuck.
Issue: I want that when user goes to a particular page he/she should not be able to refresh the page, go back to the previous page, copy anything, print screen.
Have tried different solutions like the followings:
window.onload = function () {
if (typeof history.pushState === "function") {
history.pushState("jibberish", null, null);
window.onpopstate = function () {
history.pushState('newjibberish', null, null);
// Handle the back (or forward) buttons here
// Will NOT handle refresh, use onbeforeunload for this.
};
}
else {
var ignoreHashChange = true;
window.onhashchange = function () {
if (!ignoreHashChange) {
ignoreHashChange = true;
window.location.hash = Math.random();
// Detect and redirect change here
// Works in older FF and IE9
// * it does mess with your hash symbol (anchor?) pound sign
// delimiter on the end of the URL
}
else {
ignoreHashChange = false;
}
};
}
}
<script type="text/javascript">
window.onbeforeunload = function() {
return "Dude, are you sure you want to leave? Think of the kittens!";
}
</script>
<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };
$(document).ready(function(){
$(document).on("keydown", disableF5);
});
</script>
but nothing seem to work.
Please suggest.
You can do this with javascript using the parameters of window.open, for example
window.open('yourUrl','windowName','toolbar=no');
However I would not recommend this. Instead (based on your comment to lujcon's answer) your should design your controllers and view models correctly to prevent the issues you have described. For example, if the user has already answered a question, add a flag, then if they trey to post another answer for the same question, you can check the flag and prevent an update/display error message etc.
The only way I can think of to do what you ask with a web application is to make all of your "pages" a single view that loads the results from multiple Action methods using AJAX. If you load everything using JavaScript/AJAX, the browser won't be able to keep track of any page history.
Don't do that! Web based applications means freedom. User should do anything she/he wants. The question should be: how should I design my application to handle back and refresh button correctly (not disabling them). Disabling printing is useless as at any time user can make print-screen...

Use of hashes, and user moving in history

I use some hashes in a script to scroll to differents elements of a page when the client open a page that has a trailing "#something" in its url. The problem is when the user uses the go back and for buttons of his client. How can i make the script reacting again once the client has moved back or for?
Here is the concerned portion of code:
// Arrivée avec une ancre
var $h = window.location.hash;
if ($h != '') {
var $arrh =  {'#home': '#panel_home', '#services': '#panel_services', '#realisations': '#panel_realisations', '#contact': '#panel_contact', '#about': '#panel_about' };
$('#left').scrollTo($arrh[$h], 500);
}
else {
$('#left').scrollTo('#panel_home', 500);
}
I hope my question is understandable... i'm french and i've just tried to explain my thought the best i can in english.
I don't know if what i'm asking is possible, but if you have an idea, your help will be welcome!
Edit-0:
've just seen a seemingly similar discussion there: Detecting Back Button/Hash Change in URL
I'll read and bring back answers if i find a solution (some links proposed are really interesting).
this css selector may be helpful:
#left:target
{
.
.
.
}
Add this code to a function, and call that function anytime the hash changes. I'm not sure I completely understand, but from what I do, I think this should work fine for you:
var scrollFunction = function (){
var $h = window.location.hash;
if ($h != '') {
var $arrh = {'#home': '#panel_home', '#services': '#panel_services', '#realisations': '#panel_realisations', '#contact': '#panel_contact', '#about': '#panel_about' };
$('#left').scrollTo($arrh[$h], 500);
}
else {
$('#left').scrollTo('#panel_home', 500);
}
};
window.onhashchange = scrollFunction;
You can also try using a jquery plugin like jquery hash-change (https://github.com/cowboy/jquery-hashchange) or jquery history (http://tkyk.github.com/jquery-history-plugin/)
developed for similar requirements
Well, the solution that meets my need is in that plugin:
http://benalman.com/projects/jquery-hashchange-plugin/
May be it'll help someone else...
Ps: it's really easy to use; just link the script to your document and add something like:
$(window).hashchange(function(){
my_func();
});

Categories

Resources