jquery fancybox，iframe或ajax，使用url加載

使用fancybox（v2），我怎樣才能創建一個獨特的url，在加載時，用iframe內容顯示fancybox。我已經使用內聯內容（例如www.mysite.com/index.html#idgoeshere）工作得很好，但不知道url或js應該包含哪些內容才能加載fancybox，並且在其中包含特定的iframe或ajax.txt頁面。jquery fancybox，iframe或ajax，使用url加載

我所試圖實現的，是去一個鏈接，如：

www.mysite.com/index.html#iframe.html

加載索引頁面，用打開的fancybox窗口，以及加載到fancybox窗口中的iframe.html頁面（也可以是通過ajax加載的.txt文件）。

HTML

<a class="fancybox fancybox.iframe" href="iframe.html">Iframe</a>

的fancybox

<script> 
$(document).ready(function($) { 
    $.fancybox({ 
    content: $(window.location.hash).html() 
}); 
    $('.fancybox').fancybox(); 
}); 
</script>

感謝任何幫助或指導。

凱爾

更新

感謝大家的幫助！這裏是最終爲我工作的最好的。我救了我們我的內容轉換成單獨的HTML文件，然後叫他們fancybox.iframe

JS：

<script> 
$(document).ready(function() { 
    $('.fancybox').fancybox({ 
    'scrolling' : 'no' 
    }); 
    if (window.location.hash !== "") { 
     $(window.location.hash).click(); 
    } 
}); 
</script>

來源

2013-03-07 Kyle

我想你想減少da加載時間 – 2013-03-06 18:11:59

可能重複的[jquery fancybox加載時間和獨特的URL]（http://stackoverflow.com/questions/15251905/jquery-fancybox-load-times-and-unique-urls） – JFK 2013-03-08 02:23:24

不要重複相同的問題，編輯較舊的，如果你想詳細說明 – JFK 2013-03-08 02:24:40

查看the Fancybox site上的示例Fancybox操作完全基於鏈接的href。因此，如果加載頁面，然後在調用.fancybox之前更新頁面上鍊接的href以指向iframe.html，那麼它應該按預期工作。警告：未經測試的代碼我的頭跟着頂部...

$(document).ready(function(){ 
    $('#target').attr('href', window.location.hash.substring(1)).fancybox(); 
});

需要的子呼籲從哈希字符串中刪除#從window.location.hash

希望回到這有助於

來源

2013-03-07 22:30:09 jxpx777

Thanks @ jxpk777，#target是.fancybox類嗎？ – Kyle 2013-03-08 14:34:02

是的，無論目標元素是替代該內容，無論您打算最終調用'.fancybox'。我同意喬的觀點，即使用位置散列並不是一個好主意。可能與查詢字符串的東西是一個更好的方法。 – jxpx777 2013-03-08 16:27:17

使用＃標籤是一個壞主意，因爲像谷歌和Facebook等網站往往忽略它們。

相反，在fancybox的afterLoad函數中使用window.history.replacestate。

例如：

afterLoad:function(){ 
    window.history.replaceState({},"Fancybox","/url-to-set"); 
}

約replaceState奇怪的是，前兩個參數並不重要（據我所知）。唯一重要的是最終的參數「/ url-to-set」。您希望將其設置爲您想要用作網址的唯一網址。

來源

2013-03-07 18:09:29

感謝喬，但這是否會隨着內容每次都彈出fancybox？我期望能夠只使用特定的URL調用彈出。謝謝。 – Kyle 2013-03-08 13:53:12

jquery fancybox，iframe或ajax，使用url加載

回答

相關問題