Question

我正在构建这个网站，因为我没有为通过电话和其他小型设备访问它的人设置任何移动布局，我想将它们重定向到单独的mobile_redirect.html文件，包含主站点的链接和免责声明。从那里，他们仍然可以点击链接并通过手机访问主站点。

我所拥有的一切都在工作，除了它不会让我访问手机上的主站点。我相信它是因为我的全局变量**hasBeenRedirected**没有设置为true，这是我无法弄清楚的原因。

我使用的方法涉及编辑单个全局变量.js的多个**hasBeenRedirected**文件，该变量在index_main.js

中声明

我试图让所有用户必须访问的地方是访问单独的mobile_redirect.html文件（它们自动链接到的文件）以将全局变量hasBeenRedirected设置为true - 使其成为到那里他们可以访问主站点而不被重定向，但我显然遗漏了一些东西：P

来自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>

这似乎是一个很大的帖子，但我觉得解决方案很简单。我只想尽可能多地为我的问题提供资源。

如果你想通过手机访问我的网站，你可以实际测试这个。你会注意到你无法访问主站点，因为它会一直重定向你。

http://www.summitsets.com

提前致谢！

Answer 1

我建议使用cookies，因为在重定向时，javascript会丢失所有保存在内存中的数据。

所以在你的手机_redirect.js而不是全局对象中更好地设置一个cookie：

document.cookie =＆＃34; isMobile = true＆＃34 ;;

然后，即使页面被重定向，也可以访问cookie，如

var foo = document.cookie;

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

仅将移动用户重定向到不同的.html文件

代码段

mobile_redirect.js

的index.html

mobile_redirect.html

1 个答案: