简体繁体 English

如何在网站的每个页面上制作固定（静态）HTML 元素

[英]How to make fixed (static) HTML elements on every page of site

原文 2011-07-06 17:23:29 6 3 javascript/ html/ ajax

How to make static fixed HTML element on every page of site?如何使 static 在站点的每个页面上固定 HTML 元素？

I mean - for example, it is music player on site.我的意思是-例如，它是现场音乐播放器。 It's displaying in corner of page, and while navigating on site - it doesn't reload.它显示在页面的角落，并且在网站上导航时 - 它不会重新加载。

Also, If you open many pages of site (different tabs) than state of this element is the same on all pages.此外，如果您打开许多网站页面（不同的选项卡）而不是 state，则此元素在所有页面上都是相同的。 (If I change something in this element on one page - it's changed on every page). （如果我在一页上更改此元素中的某些内容 - 它在每一页上都已更改）。

For real example I can provide a link (I think, it's allowed to do this on this site): http://www.jamendo.com/en/album/40689例如，我可以提供一个链接（我认为，允许在此站点上执行此操作）： http://www.jamendo.com/en/album/40689

If you click "Play" - music player is opened.如果单击“播放”- 音乐播放器将打开。 If you open other artist in other window - two players will be the same.如果您在其他 window 中打开其他艺术家 - 两个玩家将相同。 If you have changed volume in one window - volume is changed in other too.如果您更改了一个 window 的音量 - 另一个音量也会更改。

What techniques are used here?这里使用了哪些技术？ Can you give some references to read about such technologies?您能否提供一些参考资料以阅读有关此类技术的信息？

3 个解决方案

Well I can give you a general idea of how I would do it.好吧，我可以给你一个大致的想法，我将如何做到这一点。

You would need to persist the data of the feature you wan't to be the same across all pages.您需要保留您不希望在所有页面中保持相同的功能数据。

For example: if you wanted something to be in the same position across all pages, you could store the current position of that variable in a session variable, cookie, or database for that particular user/ip address.例如：如果您希望某些内容在所有页面中都位于相同的 position 中，则可以将该变量的当前 position 存储在 session 变量、cookie 或该特定用户 IP 地址的数据库中。 Then you would make GET requests to the server "asking" for the most recent position of whatever you're tracking.然后，您将向服务器发出 GET 请求，“询问”您正在跟踪的任何内容的最新 position。 And if it's different update the position accordingly.如果不同，请相应更新 position。

You would need to make use of Javascript, A programming language, and some kind of data persistence.您需要使用 Javascript、一种编程语言和某种数据持久性。

If you want to read about the newest stuff, you could easily do this with node.JS.如果你想阅读最新的东西，你可以使用 node.JS 轻松做到这一点。 There is a library out there that makes it very easy to reflect server side changes on the client w/o making GET requests (making it a good for chat applications).有一个库可以很容易地在客户端上反映服务器端更改而无需发出 GET 请求（使其非常适合聊天应用程序）。

You can use local storage to store the current settings and poll them from each open instance.您可以使用本地存储来存储当前设置并从每个打开的实例中轮询它们。 You won't need to use AJAX or the server if you only care about the settings being synchronized across one machine.如果您只关心在一台机器上同步的设置，则不需要使用 AJAX 或服务器。

Hopefully the site is working the same as it was when you posted the link...希望该网站的工作方式与您发布链接时一样...

This site is using Flash which seems to be using LocalConnection and ExternalInterface .该站点正在使用 Flash ，它似乎正在使用LocalConnection和ExternalInterface 。 The Flash object in the popup is the one actually playing the music.弹出窗口中的 Flash object 是实际播放音乐的那个。 The controls on the page are calling a Flash object on the page which just sends commands to the popup.页面上的控件在页面上调用 Flash object，它只是向弹出窗口发送命令。