每1分钟切换两个html文件

时间:2017-03-22 19:48:54

标签: javascript html

我一直在尝试创建一个简单的html文件,每隔几分钟就会切换两个其他html文件,但没有结果。

我的想法是,

我有两个html文件名'test1.html'和'test2.html',然后我创建了一个名为'test.html'的第三个html文件,它将加载这两个html文件并在每分钟之间相互切换而不点击或者令人耳目一新。

我正在考虑使用JS编写一个函数来执行此操作但不知道如何执行此操作。

有没有人有任何例子?

提前谢谢你。

感谢各位回复提示和想法,经过多一点工作后,我想出了这个脚本来切换页面。

    var location1 = "test1.html";
    var location2 = "test2.html";

    function changePage() {

        var currentUrl = window.location.toString()

        if (currentUrl.includes(location2)){
            window.location.href=location1
            }
        else if (currentUrl.includes(location1)){
            window.location.href=location2
            }   
        else {
            window.location.href=location2
            }               
        };

    setInterval(changePage, 60000);

但是,例如,如果我在'test.html'中使用此功能,当切换页面时,地址也会改变,这意味着我必须在'test1.html'和'test2.html'中设置相同的功能所以它可以来回改变。

是否可以将网址始终保持为'test.html',但页面内容是在'test1.html'和'test2.html'之间切换的?

感谢你。

4 个答案:

答案 0 :(得分:1)

您可以使用AJAX加载每个页面的HTML内容,而无需重新加载甚至导航离开您的test.html页面。

请检查此MDN Documentation for AJAX

答案 1 :(得分:1)

从高层次来看,这是您需要做的事情:1。通过AJAX请求获取两个文件的内容,或者包含在同一页面上但隐藏起来。 2.创建一个每分钟调用一次的JavaScript函数,该函数切换隐藏内容或发出AJAX请求。 3.你可以像这样递归地每分钟调用/执行你的逻辑 - setTimeout(myToggleFunction,60000)注意' myToggleFunction'应该递归调用myToggleFunction。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

在探索了不同的想法之后,我得到了一些这样的想法,

<script type="text/javascript" >    

    var monitorPage1 = "test1.html";
    var monitorPage2 = "test2.html";
    var timeInterval = 1000*60*2; //every 2 mins


   $.ajax({
        url: monitorPage1,
        success: function(data) {
        $('#monitorDiv').html(data);
            }
    }); 

    setTimeout( 
        function(){
            $.ajax({
                url: monitorPage2,
                success: function(data) {
                    $('#monitorDiv').html(data);
                    }
                }) 
            }, timeInterval);  

    function switchPages() {

    setTimeout( 
            function(){
                $.ajax({
                    url: monitorPage1,
                    success: function(data) {
                        $('#monitorDiv').html(data);
                        }
                    }) 
                }, 0);

        setTimeout( 
            function(){
                $.ajax({
                    url: monitorPage2,
                    success: function(data) {
                        $('#monitorDiv').html(data);
                        }
                    }) 
                }, timeInterval);  

            };

        setInterval(switchPages, timeInterval*2);   

这可能不是最好的opiton,但它使用Ajax来读取html文件内容并且每2分钟来回切换一次。

谢谢大家的帮助。