Develop Reference

JS Redirect based on browser language if ... else' statement loops infinitely

I've written a tiny piece of code to redirect based on browser language, but the 'else' portion of the code loops infinitely if I use the original URL.
I have tested it where if I redirect to a different URL it works like a charm, so I am assuming it has something to do with trying to redirect it back to the original URL but not sure how to stop this. Break/Continue and console.log works but the first two are illegal and obviously I can't leave console.log in :S I need to tell the if/else statement to essentially stop or "stay on page" if the first condition is false.
Can someone tell me how to fix this so that if the browser language is set to French, redirect ELSE stay on original URL?
<!-- language redirect -->
<script>
userLang = navigator.language || navigator.userLanguage;
if (userLang == "fr") {
window.location.href = "http://www.website.com/fr";
}
else {
console.log('null'); *** THIS WORKS but is not right
window.location.href = "http://www.website.com"; *** THIS DOESN'T WORK gets stuck in a loading loop infinitely
window.location.href="http://www.someotherwebsite.com"; ***THIS WORKS but doesn't achieve my purpose
}
</script>
If the browser language is French, redirect to French website (subdirectory) ELSE do nothing and stay on English site.

When you assign a url to the window.location.href property the url specified will get loaded even if it's set to the url you are currently on. This causes your browser to constantly reload your website if the language is not french.
From MDN:
Whenever a new value is assigned to the location object, a document will be loaded using the URL as if location.assign() had been called with the modified URL. Note that security settings, like CORS, may prevent this to effectively happen.
To solve your problem, you should not set the window.location.href property when you are already on the correct page for the users language.

Since this script is only going to be implemented in the English page, you do not need to pass anything for the else statement.
userLang = navigator.language || navigator.userLanguage;
if (userLang == "fr") {
window.location.href = "http://www.website.com/fr";
}
For the French page, you just need to change "fr" to "en".

This is just a logical issue. Why redirect to a url if it is already in there ?
Just have an extra check, whether it is already in the right url as below
<script>
userLang = navigator.language || navigator.userLanguage;
if (userLang == "fr" && window.location.href!= "http://www.website.com/fr") {
window.location.href = "http://www.website.com/fr";
}
else {
if(window.location.href != "http://www.website.com") {
window.location.href = "http://www.website.com";
}
}
</script>

JS/Jquery way to determine if the user entered page from another site

I am attempting to write a script that would launch a modal if the user enters a page from any external link. I am assuming the document.referrer is the way to do it, but not familiar enough with JS as to how to implement it in an "if" conditional. Any suggestions are appreciated.
I'm assuming it would look something like this?
if (document.referrer !== window.location.hostname) {
// do something
}

If you would like to check if the user entered a page from an external link, you can parse the document.referrer to get just the hostname, and compare that with window.location.hostname:
var parser = document.createElement('a');
parser.href = document.referrer;
var isExternallyReferred = document.referrer.length > 0 && parser.hostname !== window.location.hostname;
if (isExternallyReferred) {
// launch modal
}

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...

Is there a way to figure out a visitor's prior URL before landing on my page?

Here's the situation:
I am working with a site that forwards users from (SITE A), to a mobile version (SITE B), like so:
<script type="text/javascript">
$(document).ready(function(){
if($(window).width() < 480){
window.location = "http://mysite.com/mobile-version"
}
});
</script>
Problem is, we still need to offer users the option to return to (SITE A) from within (SITE B), but with that script in place it's just going to run the script again when users request (SITE A) and return to (SITE B).
Can an IF/ELSE statement pull the user's last visited page/site and say well...you're visiting (SITE A) from (SITE B), so no need for the re-direct?

The DOM property you're looking for is document.referrer.
It returns a string containing the page the user was on before they came to this page. i.e.
var prevPage = document.referrer;
if (!prevPage.match(/*SITE A*/)){
//Do Something
}

A server side session would best for complete cross-browser support but if you want to do it on the client side you can use HTML 5 LocalStorage if both the mobile and desktop site are on the same domain.
On the mobile site, when the user clicks to show the desktop site, store a value in localStorage:
// user wants to go to desktop site
localStorage.setItem("no-mobile-redirect", true);
window.location = 'http://desktopsite';
On the desktop site:
$(document).ready(function(){
if($(window).width() < 480){
var localVar = localStorage.getItem("no-mobile-redirect");
if(!localVar){ // only redirect if the no-mobile-redirect is not TRUE
window.location = "http://mysite.com/mobile-version"
}
}
});

Racheet's answer is correct, as far as it goes, however it's not safe to rely on this. Some web browsers can be configured to not send a REFERER header for privacy reasons, and some firewalls/routers will do this too.
Your best bet is to instead only perform the redirect if a querystring (or form) parameter is not present. For example:
"http://mysite.a.com/" - will redirect to Site B
"http://mysite-b.com/" - user is now at the mobile site, but clicks a 'view full site link'...
"http://mysite-a.com/?noredirect=true" - you note the parameter and do not redirect.
Other alternatives could perhaps involve using cookies or localstorage, but again you need to consider the possibility that the user's client doesn't support those features or has them turned off.

Just offering another solution.
Use a parameter in the URL when redirecting to desktop: http://mysite.com?rd=false
$(document).ready(function () {
if (window.location.indexOf("rd=false" != -1) return;
if($(window).width() < 480){
window.location = "http://mysite.com/mobile-version"
}
});
Come to think about it: a cookie would be more practical...