Question

您好我试图建立一个带有语言选择菜单的网站。选择语言后，将设置Cookie。如果您访问该网站，javascript应该将您重定向到包含所选语言内容的网页。我的问题是在页面更改之前菜单可见1秒钟。当页面加载时我想要javascript到location.replace 这是代码： HTML

<!DOCTYPE html>

<html>

<head>
<script src="javascript\indexscript.js""></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style\indexstylesheet.css">
<script src="javascript\indexscript.js""></script>



</head>

<body onLoad="checkCookie()">
  <div id="overlay">
    <div id="background">
    </div>
    <div class="popup-info">
      <img class="flag" id="dutch" src="images\dutchflag.png" onclick="nl()">
      <img class="flag" id="english" src="images\englishflag.png" onclick="en()">
      <div id="textholder">
        <h1 class="lang" id="NLtext">Welke taal spreekt u?</h1>
        <h1 class="lang" id="ENtext">What language do you speak?</h1>
      </div>
    </div>
  </div>
</div>

</body>

</html>

CSS

/* dit maakt een div een background die geaniemeert kan worden*/
#background {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85098);
    z-index: 1;
    color: white;
    margin: 0 auto;

}
/* stijl van de div die voor de overlay moet komen*/
.popup-info {
    top: 100px;
    left: 0;
    right: 0;
    height: 450px;
    width: 800px;
    margin: 0 auto;
    background: white;
    position: fixed;
    z-index: 2;
    -webkit-border-radius: 25px;    
}
/* de stijl van de vlaggen die samen veranderen*/
.flag {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    height: 150px;
    width: 300px;
    cursor: pointer;
    opacity: 0.6;
    -webkit-border-radius: 3px;    
}



/* individueel de vlaggen op de div plaatsen*/
#dutch {
    position: relative;
    float: left;
    margin: 100px 0 0 50px;
}



#english {
    position: relative;
    float: right;
    margin: 100px 50px 0 0;
}

/*stijl engelse vlag met een muis er boven*/
#english:hover {
    opacity: 1;
}


#textholder {
    left: 175px;
    margin: 0 auto;
    top: 300px;
    position: relative;
}

.lang {
    position: absolute;
    top: 0;
    left: 0;
}

/*BEGIN ANIMATIES*/

/* css animatie nederlands*/

#NLtext {
    left: 50px;
    -webkit-animation-name: nl;
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes nl {

    0%    {opacity: 0;}
    12,5% {opacity: 0;}
    25%   {opacity: 0;}
    37,5% {opacity: 0;}
    50%   {opacity: 1;}
    62,5% {opacity: 1;}
    75%   {opacity: 0;}
    87,5% {opacity: 0;}
    100%  {opacity: 0;}
}

/* css animatie engels*/


#ENtext {
    -webkit-animation-name: en;
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes en {

    0%    {opacity: 1;}
    12,5% {opacity: 1;}
    25%   {opacity: 0;}
    37,5% {opacity: 0;}
    50%   {opacity: 0;}
    62,5% {opacity: 0;}
    75%   {opacity: 0;}
    87,5% {opacity: 0;}
    100%  {opacity: 1;}


}
/*css animatie  nederlandse vlag*/
#dutch {
     -webkit-transition: opacity 1.5s;
}



#dutch:hover {
    opacity: 1;
}

/*css animatie nengelse vlag*/

#english {
     -webkit-transition: opacity 1.5s;
}



#english:hover {
    opacity: 1;
}

/*css fade-out animatie voor overlay*/

.overlayfade {
    -webkit-animation-name: overlayfade;
    -webkit-animation-duration: 2s; 
}

@-webkit-keyframes overlayfade {

    0%  {opacity: 1;}
    100%{opacity: 0;}
}

/*css fade-in animatie voor het body tag*/

body {
    -webkit-animation-name: bodyfade-in;
    -webkit-animation-duration: 1s; 
}

@-webkit-keyframes bodyfade-in {

    0%  {opacity: 0;}
    100%{opacity: 1;}
}

JAVASCRIPT

document.getElementById('notpage').style.visibility= 'hidden';

/* Deze function is gecomment om development makelijker te maken. Na afloop deze function weer gebruikbaar maken*/
function checkCookie() 
{
    var language = getCookie('language');

    if (language === 'nederlands')
   {                                 
     location.replace("nlhome.html");   
    }

    else if (language === 'engels'){
      location.replace("enhome.html");
    }

}


function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1);
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}





function continuescriptNL() 
{
    var child = document.getElementById("overlay");
    child.parentNode.removeChild(child);
    window.setTimeout(stillgoingNL, 500);
}

function continuescriptEN() 
{
    var child = document.getElementById("overlay");
    child.parentNode.removeChild(child);
    window.setTimeout(stillgoingEN, 500);
}


function stillgoingNL() 
{
    location.replace("nlhome.html");
}

function stillgoingEN() 
{
    location.replace("enhome.html");
}





function nl() 
{
    var lang = 'nederlands';
    setCookie("language", lang, 30);
    var OverLay = document.getElementById('overlay');
    OverLay.classList.toggle('overlayfade');
    window.setTimeout(continuescriptNL, 2000);
    function stillgoingNL() 
    {
        location.replace("nlhome.html");
    }



}
function en() 
{
    var lang = 'engels';
    setCookie("language", lang, 30);
    var OverLay = document.getElementById('overlay');
    OverLay.classList.toggle('overlayfade');
    window.setTimeout(continuescriptEN, 2000);



}

Answer 1

不要在身体的onload事件中这样做。相反，将代码内联，放在页面顶部（甚至在head部分中），以便在解析代码后立即执行。这样，你就可以使用JavaScript了。

更好的方法是在服务器上执行这些检查，以便您可以立即重定向。在这种情况下，您可以在服务器上进行重定向（网址不会更改，但您会获得不同的内容），或者通过具有正常重定向的客户端，在这种情况下，浏览器只需要处理标头并启动新的请求，这通过JavaScript重定向仍然更有效。此外，总是猜测JavaScript是否完全执行。在服务器上，您可以更好地掌控。

PS：对于其他代码，onload事件可能不是最佳位置。加载完整文档后会触发此事件，包括图像等。一个更好的事件是DOMContentLoaded，一旦DOM本身就绪就会被触发，但可能在所有图像被加载之前被触发。此事件非常适合将事件连接到元素和其他此类初始化代码。

但是对于这种特定情况，您不需要DOM。您只需要尽快重定向，所以不要使用任何事件。只需执行代码。

Answer 2

正如其他人已经提到的，服务器端重定向是您可以获得的最快速度。如果您必须在javascript中进行重定向，请将checkCookie更改为立即执行的表达式

(function checkCookie() {
    var language = getCookie('language');
    if (language === 'nederlands') {                                 
     location.replace("nlhome.html");   
    } else if (language === 'engels') {
      location.replace("enhome.html");
    }
}());

将此getCookie函数添加到新的js文件并将其放在头部。

<head>
<script src="javascript\redirection.js"></script>

<!-- Latest compiled and minified CSS -->

这样，函数checkCookie将在页面加载时执行。

另外，建议您为此HTML添加加载微调器叠加层。

如果找不到cookie，请删除微调器覆盖。这也可以作为else进入checkCookie函数。

这会阻止页面闪烁并使重定向变得不那么麻烦。

位置替换太慢

2 个答案: