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

我的网站严重依赖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（）

时，如何让所有脚本都能正常运行呢

---

谢谢。

您必须手动触发页面初始化程序进程，因为它取决于页面类型。您可以在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>

//获取ajax内容并在用户触发历史记录时初始化它
window.onpopstate=函数（事件）{
getPage（event.state.id）；
}
$（函数（）{
$（“.nav”）。单击（函数（）{
var pageInfo={“id”：this.id，“url”：this.href}；
history.pushState（pageInfo，null，this.href）；
getPage（this.id）；
});
});
函数getPage（pageId）{
$.get（”http://mydomain/getPage/“+pageId，函数（响应）{
//将ajax内容附加到容器
$（“#内容包装器”）.append（response.content）；
//根据页面类型调用初始值设定项
初始值设定项（pageId）；
});
}
函数初始值设定项（pageId）{
开关（页面ID）
{
案例“第1页”：
打破
案例“第2页”：
google.maps.event.addDomListener（窗口'load'，函数（）{
........
});
打破
案例“第3页”：
打破
}
}

希望这对你有帮助