jquery history.js + fancybox

這次遇到使用 masonry + infinitescroll 的商品頁，
要加上 Fancybox (iframe) 單品預覽頁面，
同時在網址列呈現 url

網址 replace 選擇 History.js 來套用
1.history.replaceState 覆寫當下網址
2.history.pushState 堆疊網址(也可以是說跳下一頁，需要 history.go(-1)才看的到)

邏輯
1.當 Fancybox 顯示 iframe 後覆寫網址
2.若iframe中有切換頁面，都用 replaceState 保持在同個位置
3.當 Fancybox close ，則覆寫成原始頁面網址
4.如果使用者按回上一頁按鈕(popstate)，則呼叫 fancybox.close()

FancyBox2部分
$(ele).fancybox({
    afterShow: function(){
        var obj = $(this);
        history.replaceState({}, '', obj.attr('href'));

        $(window).unbind('popstate');
        $(window).bind(;popstate', function(){
            obj.attr('pop', '1');
            $.fancybox.close();
        });
    },
    beforeClose: function(){
        if($(this).attr('pop') != '1'){
            history.back();
        }else{
            $(this).removeAttr('pop');
        }
    }
});

iframe部分(內部跳頁連結)
    parent.window.history.replaceState({}, '', 'url');
    location.replace('url');

history.js 詳細介紹