Question

我的网站在很大程度上依赖于jQuery和其他JavaScript库。有很多UI效果可以控制页面加载和访问AJAX内容的方式等。

我还使用history.pushState()函数来加快加载时间。

$('.navLink').click(function(e) {
    e.preventDefault();
    history.pushState(null, null, this.href);
    replacePage(this.href); // function to load content using .ajax()
});

我使用.live()锐化了其他事件，以允许它们在执行history.pushState()后运行。

我的问题是我有其他脚本在初始页面加载后执行，在history.pushState()之后不再渲染。

一些示例是简单的Google地图功能

google.maps.event.addDomListener(window, 'load', initialize);

无法识别之前加载的脚本调用和/或库。

那么在加载history.pushState()时，如何让我的所有脚本完美地哼唱？

感谢。

Answer 1

您必须手动触发页面初始化程序进程，因为它取决于页面类型。在成功获取AJAX内容并附加到DOM树之后，您可以调用初始化程序。

顺便说一下，我认为您需要注册onpopstate事件处理程序，该处理程序在用户触发历史记录时响应更改内容。当您执行用于AJAX内容检索的pushState（）时，您必须记录堆栈页面必要信息（例如，id，url）。

<a id="page1" class="nav" href="main">Page1</a>
<a id="page2" class="nav" href="map">Page2</a>
<a id="page3" class="navs" href="help">Page3</a>
<div id="content-wrapper">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

    //get ajax content and init it when user trigger history back
    window.onpopstate = function(event){
        getPage(event.state.id);
    }

    $(function(){
        $(".nav").click(function(){
            var pageInfo = {"id":this.id,"url":this.href};
            history.pushState(pageInfo, null, this.href);
            getPage(this.id);
        });
    });

    function getPage(pageId){
        $.get("http://mydomain/getPage/"+pageId,function(response){
            //append ajax content to container
            $("#content-wrapper").append(response.content);

            //invoke initializer according to page type
            initializer(pageId);
        });
    }

    function initializer(pageId){
        switch(pageId)
        {
            case "page1":
                break;
            case "page2":
                google.maps.event.addDomListener(window, 'load', function(){
                    ........
                });
                break;
            case "page3":
                break; 
        }
    }
</script>

希望这对你有所帮助。

如何使用history.pushState运行以前加载的Javascript

1 个答案: