Question

我是新的javascript。我设法创建了一个.load脚本，它在不同的视图中加载（有很多帮助）。它工作但我不知道当有人使用像www.mydomain.com/#view3这样的网址时如何告诉脚本加载到适当的视图中

除了这个已经存在的问题，我想用html5历史api替换当前的加载脚本，当客户端浏览器不支持时，回退到旧版本。我怎样才能知道浏览器是否支持历史api，如果不支持如何进行回退？我知道modernizr支持后备的css类。在javascript中为同一个东西存在一个lib吗？

我知道它很多我要求的。我正在读自己，但我有点压力： - /

这是我的正确代码：

$(document).ready(function () {
    $(".con").load("views/startseite.php", function () {
        $(".scroll").jScrollPane({mouseWheelSpeed:20});$(".jspDrag").hide();$(".jspScrollable").mouseenter(function(){$(this).find(".jspDrag").stop(!0,!0).fadeIn()});$(".jspScrollable").mouseleave(function(){$(this).find(".jspDrag").stop(!0,!0).fadeOut()})
    });
    $("nav a").click(function (a) {
        a.preventDefault();
        a = $(this).attr("href").split("/").pop().split(".").shift();
        $(".con").hide().load("views/" + a + ".php", function () {
            $(".con").fadeIn("fast",
                function () {
                    $(".scroll").jScrollPane({mouseWheelSpeed:20});$(".jspDrag").hide();$(".jspScrollable").mouseenter(function(){$(this).find(".jspDrag").stop(!0,!0).fadeIn("slow")});$(".jspScrollable").mouseleave(function(){$(this).find(".jspDrag").stop(!0,!0).fadeOut("slow")})})
        });
        document.title = "My-Domain.com | " + (a.substr(0, 1).toUpperCase() + a.substr(1));
        location.hash = a;
        return !1
    })
    $(document).on('submit', 'form.ajax', function (e) {
        e.preventDefault();
        var that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};
        that.find('[name]').each(function (index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value
        });
        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function () {
                $(".flipbox").flippy({
                    color_target: "",
                    duration: "500",
                    verso: "Anything!",
                    onFinish: function () {
                        $("#no-color").css("background-color", "transparent");
                    }
                });
            }
        });
    });
    $(document).on('submit', 'form.lebenslauf', function (e) {
        e.preventDefault();
        var $this = $(this);
        $.ajax({
            url: './secure/secure.php',
            type: 'post',
            data: {
                code: $('input[name=bewerbung]').val()
            },
            success: function (resp) {
                if (resp.substr(0, 5) == "Error") {
                    $('.error').html(resp);
                } else {
                    $('.flipbox').flippy({
                        duration: "500",
                        verso: resp,
                        onFinish: function () {
                            $(".flipbox").css("background-color", "transparent");
                        }
                    });
                }
            }
        });
    });
});

Answer 1

不幸的是，我无法帮助您解决加载不同视图的问题，但我想我可以对您问题的第二部分提供一些见解。

您正在寻找的大多数browserstate功能都可以使用history.js进行处理： https://github.com/browserstate/history.js/

它为您提供了简单的预构建功能，并且所有跨浏览器支持都在后台处理。当html5历史api不可用时，它会自动使用哈希。

希望那是你正在寻找的图书馆，祝你好运！

html5历史api后备？

1 个答案: