0

我的网站严重依赖 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.maps.event.addDomListener(window, 'load', initialize);

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

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

谢谢。

4

1 回答 1

1

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

顺便说一句，我认为您需要注册 onpopstate 事件处理程序，该事件处理程序在用户触发历史记录时响应更改的内容。当您执行 pushState() 进行 AJAX 内容检索时，您必须记录堆叠页面的必要信息（例如，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>

希望这对你有帮助。

于 2013-08-20T09:52:16.603 回答