HTML

Question

我遇到了两个带* .js

的html文件之间连接的问题

我得到index.html我得到了一个formular.php而且我得到了一个backbutton.js

我想要做的是：如果我发送我的fomular via按钮im调用formular.php将文本写入我的MySQL数据库。如果有人忘记输入电子邮件地址，我会收到一个错误页面，其中有一个按钮＆＃34;返回＆＃34;。有了那个按钮，我想回到公式页面。

我的问题是我的index.html是一个包含3个不同div的页面，其中包含ids page1，page2，page3。当用户完成测验时，页面会自动从page1更改为page2

function checkplayer() {
if (player1 == true && player2 == true && player3 == true && player4 == true) {
    setTimeout(function() {
        $(document).ready(function() {
            $("#page1").fadeOut(1000);
            setTimeout(function() {
                $("#page2").fadeIn(1000);
            }, 1500);
        });
    }, 1000);
}

所以我的整个页面都是1页，有3个不同的div，它们已经淡入淡出。

如果我使用formular.html中的后退按钮history.back();我登陆page1 div。但我需要使用公式来获取page3 div。如果我重新加载页面也会发生同样的情况我总是登陆page1，因为我的index.html以page1开头，page2和page3设置为display: none。这就是为什么我猜回历史不适用于这种情况，因为我退后一步意味着新加载的index.html

我尝试做的是backbutton.js

function backButton() {

    jQuery("#errorpage").fadeOut(0);
    jQuery("#page3").fadeIn(0);

}

错误消失了，但是page3没有淡入，因为backbutton.js不知道page3 div所在的index.html。

是否有可能将错误发送到fadeout并使index.html page3淡入？是否有可能导入＆＃34; index.html page3 div进入backbutton.js？

任何人都知道如何在这三个文件之间建立连接，或者是否有其他方法可以将错误发送到fadeout并将page3 div转换为fadein？

感谢任何帮助。谢谢

Answer 1

您可以将哈希传递给网址：

function backButton() {
    jQuery("#errorpage").fadeOut(0);
    window.location = "index.html#page3";
}

然后检查原始页面上的相同哈希，如下所示：

function checkHash() {
    $(document).ready(function() {
        if (window.location.hash === "#page3") {
            $("#page3").fadeIn(1000);
        }
    });
}

另外，如果没有输入电子邮件地址，请考虑不允许用户在第一时间前进。

Answer 2

考虑使用哈希（＃）来识别3个不同的页面;即，当从第1页切换到第2页时，通过将URl更改为'YOUR_PHP_PAGE.php＃page2'等信号来表示它。这样，浏览器历史记录（以及重新加载）应该能够正确处理它。在页面-JG中监听hash-changed-event并显示相应的div。（请注意，通过location.href = ...更改哈希值#page2不会重新加载页面，但会触发事件。）关于错误页面（淡入/淡出），您可以将其放在同一页面上。然后使用ajax将数据发布回服务器，而不是加载新页面..

Answer 3

您可以在div中使用哈希项作为id，并且可以通过添加这样的哈希（index.html＃page2）来调用特定div。这直接落到id而不是重新加载整个页面。同时我们可以使用淡入淡出使用jquery和ajax脚本来发布数据

Answer 4

使用锚点指导用户是很常见的。使用HTML5，您可以通过History.js使用历史/状态API。

我使用history.js插件重写了你的代码。阅读示例代码中的注释以查看发生的情况。将page2finished（）和throw_error（）函数替换为当前现有的告知用户何时完成第2页以及何时应显示错误的方法。包含这些内容是为了向您展示此代码应采用的流程。

HTML

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/history.js"></script>

的JavaScript

$(document).ready( function() {
    var player1,
        player2,
        player3,
        player4,
        errorpage = $("#errorpage");

    //Initialize the history.js script by binding it to the window object.
    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
    });

    //Add page 1 to the browser history and load the first anchor.
    History.pushState({state:1}, "Page 1", "?page=1");

    //Make sure that the other elements are hidden when the user first loads the page.
    $("#page2, #page3, #errorpage").hide();

    function checkplayer() {
        if (player1 && player2 && player3 && player4) {
            $("#page1").fadeOut(1000, function() {
                $("#page2").fadeIn(1000, function() {
                    //Add page 2 to the browser history and load the second anchor.
                    History.pushState({state:2}, "Page 2", "?page=2");
                });
            });
        }
    }

    //After the user is done with page 2 throw them to page 3 by adding it to the browser history then loading the third anchor.
    function page2finished() {
        $("#page2").fadeOut(1000, function() {
            //Add page 3 to the browser history and load the third anchor.
            $("#page3").fadeIn(1000, function() {
                History.pushState({state:3}, "Page 3", "?page=3");
            });
        });

    }

    //Something went wrong! Show the #errorpage element.
    function throw_error(text) {
        //Put the error text into the element and show it to the user.
        errorpage.text(text);

        //Hide the main pages.
        $("#page1, #page2, #page3").hide();

        //Add the error to the browser history and show that anchor.
        errorpage.show();
        History.pushState({state:3}, "Error", "?page=errorpage");
    }

    //The user clicked the back button
    function backButton() {
        errorpage.hide();

        //We saved '3' linking to page 3 so tell history.js to go there.
        History.back(3);
    }

});

从php到html页面的后退按钮div id没有history.back（）

4 个答案:

HTML

的JavaScript