Ajax，html5，Fancybox.js

Question

我在使用Ajax和Fancybox.js照片查看器方面遇到了问题。

我首先将网站设置为web 1.0，标准导航带有超链接。

但对于html5浏览器，我正在使用创建Web 2.0体验的JavaScript。

javascript首先高亮显示链接onclick事件，该事件产生一个XMLHttpRequest，它调用一个PHP脚本来解析html并发回我想要替换的部分html。我正在使用pushState和popState来使后退和前进按钮起作用。

它工作得很好，它创建了Ajax效果，同时坚持包括SEO在内的Web 1.0的所有优点，因为就搜索引擎蜘蛛的链接而言，链接只是标准html页面的标准链接。

问题是其中一个页面使用Fancybox.js来显示照片，当通过标准URL访问页面时它可以正常工作，但是当通过Ajax脚本访问html时如果中断它。

这是Ajax的代码，

if (history.pushState) {

function changeContent(url) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById('content').innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET", "getContents.php?url=" + url, true);
    xmlhttp.send();
}





$(document).ready(function() {
    var elems = null,
        links = null,
        link = null,
        i;

    elems = document.getElementById('nav');
    links = elems.getElementsByTagName('a');

    if (links) {
        for (i = 0; i < links.length; i++) {
            links[i].addEventListener("click", function(e) {
                    url = $(this).attr("href");
                    var pathArray = window.location.pathname.split( '/' );
                    var n = pathArray.length;
                    changeContent(url);
                    history.pushState(null, null, url);
                    e.preventDefault();

                    var urlstr = window.location,
                    index = /index/g,
                    program = /program/g,
                    photos = /photos/g,
                    testimonials = /testimonials/g,
                    about = /about/g,
                    contact = /contact/g;

                    if (program.test(urlstr)){
                        changeCurrentPage('#program');
                        document.title = "Our Programs Kolibri Daycare";

                    }else if (photos.test(urlstr)){
                        changeCurrentPage('#photos');
                        document.title = "Photos Kolibri Daycare";
                        slideShow();

                    }else if (testimonials.test(urlstr)){
                        changeCurrentPage('#testimonials');
                        document.title = "Tesimonials Kolibri Daycare";

                    }else if (about.test(urlstr)){
                        changeCurrentPage('#about');
                        document.title = "About Kolibri Daycare";

                    }else if (contact.test(urlstr)){
                        changeCurrentPage('#contact');
                        document.title = "Contact Kolibri Daycare";
                    }else {
                        changeCurrentPage('#home');
                        document.title = "Kolibri Daycare";
                    }
                }, false);
            }
        }

        window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {

        var pathArray = window.location.pathname.split( '/' );
        var n = pathArray.length;
        if (pathArray[n-1]){
            changeContent(pathArray[n-1]);
        }else {
            changeContent('index.html');
        }
    }, false);
    }, 1);
});
}

和她是调用Fancybox.js的脚本，

 <script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $("a[rel=example_group]").fancybox({
            'overlayShow'   : false,
            'cyclic'        : true,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic'
        });
    });
//]]>
</script>

它位于页面的头部。

当通过Ajax引入具有照片链接的html时，不包括调用fancybox.js的脚本。我曾尝试在不同的地方调用它，但似乎没有任何工作。有没有人有任何想法？

Answer 1

您需要在从ajax添加的新元素上重新初始化fancybox。我不确定为什么你不只是将整个页面升级到HTML5并使用jQuery提供的一些ajax函数，但我认为应该在此行之后插入重新初始化（未经过测试！）：

document.getElementById('content').innerHTML = xmlhttp.responseText;
$('#content').find("a[rel=example_group]").fancybox();