Alex Hail Alex Hail - 1 month ago 9
HTML Question

Redirect mobile user to different .html file only once

I have this website I am building and since I don't have any mobile layouts set up for people accessing it through phones and other small devices, I would like to kindly redirect them to a separate

mobile_redirect.html
file that contains a link and a disclaimer to the main site. From there they can still click the link and go to the main site on their phone.

Everything I have is working except for the fact that it wont let me access the main site on my phone. I believe its because my global variable
hasBeenRedirected
is not setting to true for a reason that I cannot figure out.

The methodolgy I used involes multiple
.js
files editing a single global variable
hasBeenRedirected
which is declared inside
index_main.js


I attempted to make it where all the user had to do was visit the seperate
mobile_redirect.html
file (of which they are automatically linked to) to set the global variable
hasBeenRedirected
to true--making it to where they could then visit the main site without being redirected, but I am clearly missing something :P

Snippet from
index_main.js
:



window.hasBeenRedirected = false; // has the user been redirected to our mobile site or not

//"things" to do as soon as our webpage loads
$(document).ready(function(){
"use strict";

//if they have a tiny screen then redirect them to the mobile_redirect.html file
if(screen.width <= 800 && !window.hasBeenRedirected){
window.location = "http://www.summitsets.com/mobile_redirect.html";
}
//....code continues but not relevant here


mobile_redirect.js



//if the user has been redirected once then we wanna make sure we dont do it again!
$(document).ready(function(){
"use strict";

window.hasBeenRedirected = true;
});


index.html



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Summit Sets</title>

<!-- Load the default CSS style sheet for our webpages */ -->
<link href="/css/defaultStyleSheet.css" type = "text/css" rel = "stylesheet" />

<!-- Load jQuery UI Library CSS Style sheet -->
<link rel="stylesheet" href="/scripts/jquery-ui-1.12.1/jquery-ui.min.css">

<!-- Get jQuery from internet-->
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>

<!-- Load jQuery UI Library from directory -->
<script src="/scripts/jquery-ui-1.12.1/jquery-ui.min.js" type = "text/javascript"></script>

<!-- Load Transit CSS -> jQuery transform library -->
<script src="/scripts/.transit script/jquery.transit.min.js" type = "text/javascript"></script>

<!-- Load our own jQuery scripts we need from directory-->
<script src="/scripts/index_main.js"></script>

</head>

<body>
<div class = "page" id = "page_1">
<div id = "socialIconsMenu" style = "position: absolute;">
<a href = "https://www.youtube.com/channel/UCNeU3LrGEr_-peHpApCSBdQ"><img class = "socialIconsMenu_Elements" alt = "" id = "youtube" src = "/images/youtube_icon_dark.png"/></a>
<a href = "https://www.facebook.com/summitsets/"><img class = "socialIconsMenu_Elements" alt = "" id = "facebook" src = "/images/facebook_logo.png"/></a>
<a href = "https://www.instagram.com/summitsets"><img class = "socialIconsMenu_Elements" alt = "" id = "instagram" src = "/images/instagram_logo.png"/></a>
<!-- <div id = "otherSocialContactButton" style = "opacity: 0.0">OTHER</div> -->
</div>

<h1 id = "SSLogoTitle" style = "opacity:1; font-size: 81px; margin-top: 0px; text-align: center;">The Summit Sets</h1>
<p id = "SSLogoUnderscore" style = "opacity:1; font-size: 28px; margin-top: 0px; text-align: center;">Integrated Entertainment</p>
</div>
</body>
</html>


mobile_redirect.html



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Whoops!</title>

<!-- Get jQuery from internet-->
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>

<!-- Load the jQuery for this page -->
<script src = "/scripts/mobile_redirect.js/" type = "text/javascript"></script>

<link href = "/css/defaultStyleSheet.css" type = "text/css" rel = "stylesheet" />
</head>

<body>
<p style ="text-align: center; font-size: 60px; font-weight: 700;" >Looks like you accessed our site from a mobile device! </p>
<p style ="text-align: center; font-size: 35px; font-weight: 200;" >Unfortunately our site is not yet designed to run smoothly
on mobile devices. You may continue if you'd like by
using the link below, but many or all features may either
not function properly--or not functional at all.
For an optimal experience, we highly suggest using
a laptop, desktop, or high performance tablet.
We apologize for the inconvenience.</p>
<a href = "http://www.summitsets.com/"><p style = "font-weight: 500; font-size: 45px; text-align: center;">Take me to the main site</p></a>
</body>
</html>


This seems like a big post but I feel as if the solution is quite simple. I just wanted to provide as many resources to my problem as possible.

You can actually test this live if you'd like by going to my website on your phone. You'll notice how you cant access the main site cause it keeps redirecting you.

http://www.summitsets.com

Thanks in advance!

Answer

I suggest the use of cookies , because on redirections javascript lost all data saved in memory .

So in your mobile _redirect.js instead of global object better set a cookie :

document.cookie = "isMobile=true";

And then you can access cookies even if page is redirected like

var foo = document.cookie;

http://www.w3schools.com/js/js_cookies.asp

Comments