Question

我的问题是在另一个页面加载后从登录页面重定向我有两个页面landing.html和index.html
我需要在5秒后从登陆页面重定向所以我使用刷新元

<meta http-equiv="refresh" content="5;url=index.html" />

我还使用javascritp加载旧版浏览器

<script>
        var timer = setTimeout(function() {
            window.location='index.html'
        }, 5000);
    </script>

我需要index.html在用户打开landing.html时开始加载所以在用户重定向到index.html之后，他会找到它已加载的

Answer 1

您可以使用Ajax函数加载隐藏的div，并依赖浏览器缓存。然后，您可以选择在设定的时间后重新定向，或者将重定向添加到load回调：

HTML:
<div id = "hidden" style = "display:none"></div>

JS
$(document).ready(function() {
   $('#hidden').load('index.html');
      setTimeout(function() {
         location.href = 'index.html';
      }, 5000);
   });
});

或

$(document).ready(function() {
    $('#hidden').load('index.html', function() {
        location.href = 'index.html';
    });
 });

Answer 2

您的代码段的问题在于，您首先请求登录页面，然后等待5秒，然后请求index.html - 在5秒后开始加载，让用户加载2页5秒延迟。

1可能的解决方案是：

通过ajax在登录页面上请求Index.html并在ajax加载index.html后显示它

代码看起来像这样：

landing.html上

<!DOCTYPE html>
<html lang="cs">

    <head>
        <title>LENDING PAGE</title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="frontend.js"></script>
    </head>

    <body>LANDING PAGE CONTENT</body>

</html>

frontend.js

$.ajax({

    url: '/sandbox/index.html',
    dataType: 'html'

}).done(function(html, status_text, response) {

    if(response.status === 200) {

        document.write(html)

    } else {

        // html couldnt be loaded, hendle error

    }
}).fail(function(err) {

    // error during jQuery ajax

});

的index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>INDEX PAGE</title>        
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    </head>

    <body> INDEX PAGE CONTENT </body>

</html>

此解决方案存在1个问题。 JS用index.html的HTML替换文档，但是无论如何都必须加载所有外部文件（即CSS）。

更好的解决方案

如果着陆页不是很复杂，请将其放在整页固定位置的div中，当页面加载完毕后，隐藏着陆div。

// hide landing div on document.ready
$(function() {
    $('#landing_div').hide();
})

在加载另一个页面后从登录页面重定向

2 个答案:

1可能的解决方案是：

landing.html上

frontend.js

的index.html

更好的解决方案