创建不在网页上重新加载的DIV标记 [英] Create a DIV tag that does not reload across web pages

问题描述

我正在尝试在页面顶部创建一个div，当用户浏览我的网站时，该div不会重新加载。 div将包含一个MP3播放器，将在整个网站上不断播放。我将如何编写这个以这种方式工作？

I am trying to create a div at the top of my page that does not reload itself as users browse through my website. The div will contain an MP3 player that will play constantly across the site. How would I go about coding this to work in such a manner?

主站点正在运行joomla，我想避免使用Iframes，因为站点需要保持搜索引擎友好。

The main site is running joomla, I would like to avoid using Iframes as the site needs to remain search engine friendly.

<div id="siteWidePlayer">
 <audio controls>
  <source src="audiostream.ogg" type="audio/ogg">
  <source src="audiostream" type="audio/mpeg">
  Your browser does not support the audio element.
 </audio>
</div>

推荐答案

使用ajax将内容加载到包含的div中您的非静态内容。

Use ajax to load content into a div that will contain your non-static content.

<div id="siteWidePlayer">
    <audio controls>
    <source src="audiostream.ogg" type="audio/ogg">
    <source src="audiostream" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div>
<div id="content">
    // Your default content here
</div>
<script>
    $(document).ready(function() {
        $(someElement).on(someEvent, function() {
            $('#content').load(somePage);
        });
    });
</script>

编辑：

Ajax可以保留SOE通过使用过时的hashbangs（＃！）友好，但是旧浏览器和主要搜索引擎支持或者通过标准的pushState调用支持，但旧版浏览器不支持（IE8等）。 Google就此事撰写了一篇很好的文章。

Ajax can remain SOE friendly by using hashbangs(#!) which are outdated, but supported by older browsers and major search engines or through pushState calls which are standard, but not supported by older browsers(IE8, etc.). Google has a good article on this matter.

这篇关于创建不在网页上重新加载的DIV标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！