All geek questions in one place

Redirect the mobile user to another .html file only once.

I have this site that I create, and since I do not have mobile layouts configured for people accessing it via phones and other small devices, I would kindly redirect them to a separate file mobile_redirect.htmlcontaining a link and disclaimer to the main site . From there, they can still click the link and go to the main site on their phone.

Everything that I have works, except that it will not allow me to access the main site on my phone. I believe because my global variable **hasBeenRedirected**does not set to true for a reason that I cannot understand.

The methodology used includes several files .jsediting one global variable **hasBeenRedirected**, which is declared insideindex_main.js

I tried to do this when all the user had to do was visit a separate file mobile_redirect.html(to which they are automatically linked) to set the global variable hasBeenRedirectedto true - do it where they could then go to the main site without being redirected, but I obviously missed something: P

Fragment 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 don't 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 great post, but I feel the solution is quite simple. I just wanted to provide as many resources as possible for my problem.

, , . , , .

http://www.summitsets.com

!

+4
1

cookie, javascript , .

, _redirect.js cookie:

document.cookie = "isMobile = true";

cookie, ,

var foo = document.cookie;

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

+4

Source: https://habr.com/ru/post/1659543/

More articles:


All Articles