个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 08:15:15 25 4
gpt4 key购买 nike

我正在 build 这个网站，由于我没有为通过手机和其他小型设备访问它的人设置任何移动布局，我想将他们重定向到一个单独的 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

提前致谢!

最佳答案

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

所以在你的移动 _redirect.js 而不是全局对象中最好设置一个 cookie:

document.cookie = "isMobile=true";

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

var foo = document.cookie;

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

关于javascript - 仅将移动用户重定向到不同的 .html 文件一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40365238/

25 4 0
文章推荐： java - 是否可以在没有 JDK 的情况下在 Windows 上使用 eclipse？
文章推荐： ios - swift 3 : Why symbol _ is added before sender in parameters of action?
文章推荐： java - JRE如何知道发生异常的代码行号？
文章推荐： ios - Swift/cornerRadius 和 masksToBounds 让 UIImageView 消失
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com