如何創建即使在瀏覽其他頁面時仍然保留的靜態頁眉（lala.com）

我對lala.com的工作方式感興趣。他們有一個標題，保持固定在瀏覽器的頂部，他們有一個Flash音樂播放器。如何創建即使在瀏覽其他頁面時仍然保留的靜態頁眉（lala.com）

您可以點擊網站中的其他鏈接，它們顯示在標題下方，但標題不會中斷，並且可以繼續播放音樂。

如果目標是一個現代瀏覽器，比如IE8 & FF 3.6，實現這個目標的最好方法是什麼？

感謝您的任何幫助。

2010-03-25 user169867

幀/ I幀

一體，實現這種方式是創建一個frameset或使用iframes顯示子頁面。頂部（或底部）框架將是一個非常小的框架，幷包含您的音樂播放器。大框架將包含正在瀏覽的頁面。這種技術被用於例如通過Google點擊image search result。

此方法有其缺點：用戶將在地址欄中看到您的URL，而不是正在瀏覽的頁面。如果用戶在地址欄中輸入內容，他們將離開您的框架集。這是不可能的，例如記下當前頁面的URL。

阿賈克斯

第二，更好的辦法是建立加載其他頁面到通過AJAX當前頁面的導航。請參閱示例實施here。這將提供流暢的加載，音樂將繼續播放。如果做得對，甚至有可能保留一個健康的鏈接結構，不會破壞外部引用，並有「後退」按鈕。我鏈接的教程涵蓋了兩個方面。要小心，這是一個由3部分組成的教程。雖然它僅適用於JavaScript，但有些解決方案會優雅地降級（當JavaScript被關閉時，會回落到切換頁面的「正常」行爲）。

來源

2010-03-25 14:53:07

真是個好主意！把我的恥辱... – Kyle 2010-03-25 14:59:17

@凱爾謝謝！它只是出來的方式:) – 2010-03-25 14:59:59

這是偉大的，真棒+1。 – Kyle 2010-03-25 15:01:12

這個具體的例子lala.com使用iframes完成。

來源

2010-03-25 14:53:58 Kyle

除了框架，你可以用ajax做部分頁面刷新。而不是完全加載每個操作的新頁面，你會做部分頁面刷新。通過仔細編碼，您可以保留bookmarking and the back button functionality。像jQuery這樣的庫（以及其他許多庫）使跨越不同瀏覽器的Ajax顯得更簡單。編輯快速搜索揭示了關於jQuery的後退按鈕插件的Stack Overflow問題。所以，如果你使用jQuery，你可以使這個方法更容易。

下面是一些存根代碼：

HTML

<html> 
<head> 
<!-- ... --> 
</head> 
<body> 
<div id="music-header"> 
<!-- ...Music header content goes here --> 
</div> 
<div id="content"> 
<!-- ...Body of different pages goes here --> 
</div> 
</body> 
</html>

JavaScript是在我提供了關於如何處理書籤和回退按鈕提供的鏈接。

來源

2010-03-25 14:58:06 justkt

如何創建即使在瀏覽其他頁面時仍然保留的靜態頁眉（lala.com）

回答

相關問題