0

jquery推荐的ajax导航方式

我刚刚尝试了这个简单的 jquery ajax 代码,以 ajax 方式加载页面中的所有链接。

$('a').click(function(e){
        e.preventDefault();
        url = $(this).attr('href');
        $('body').fadeTo('slow', 0.2); 
        $('body').load(url, function(data){
            $(this).fadeTo('slow', 1, function(){
                $(this).html(data);
                scroll(0,0);
            });
        });
    });

[页面中的链接坚持当前域,并且不存在外部链接]

页面加载按预期工作,但 Facebook、LinkedIn、pinterest 按钮的脚本无法加载。

我认为这不是进行 ajax 导航的最安全方法,而且我确信其他 JS 文件,内联 JavaScript 会导致错误。

http://davidwalsh.name与 mootools 有一些很好的 ajax 导航工作。我正在尝试使用 jquery 来实现相同的目标。

该网站成功加载并执行了每个脚本,并且可以看到没有完成 ajax 工作来加载特定的脚本。

是否有任何安全的方法来实现这一点,确保 ajax 加载的页面正常工作?

4

1 回答 1

0

您应该调用将脚本附加到负载处理程序中的函数,因此它会在每次负载时重新附加所有 DOM 脚本。

F.ex,如果你有这个代码:

$(document).ready(function() {
    $('#facebook').doFacebook();
    $('#twitter').doTwitter();
});

将其更改为:

var onload = function() {
    $('#facebook').doFacebook();
    $('#twitter').doTwitter();
};
$(document).ready(onload);

然后onload只要body有新内容就打电话。

内联脚本应根据文档执行。

您可能还想了解如何使用以下方法操作浏览器历史记录和 URL .pushState

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

如果你用谷歌搜索一下,有一些不错的 jQuery 插件可以跨浏览器的方式添加这个功能。

于 2012-11-23T07:04:09.257 回答