Question

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

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

<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>

Answer 1

使用iframe来保存您网站的正文。让您网站的主要布局保持顶部div并为iframe设置div。这样你的顶级div将是静态的。

Answer 2

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

<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可以通过使用过时的hashbangs（＃！）保持SOE友好，但是旧版浏览器和主要搜索引擎支持或者通过标准的pushState调用支持，但旧版浏览器不支持（IE8等）。 Google has a good article on this matter.

Answer 3

为此你有3种方法：

1-第一个解决方案是使用iframe，正如您所说，这不是您最喜欢的解决方案。

2-为您的浏览器创建一个插件，这不是一个好方法，因为你的最终用户将被迫安装它，但对你来说SEO关注这是最好的。

3-更改加载页面的方式并使用jQuery加载函数加载实际页面，为此你必须在其中创建一个带有jQuery的新html页面，用你的数据创建你的div元素您的页面并为您的网站页面创建另一个div加载，但这样您的问题就是处理joomla以确保所有joomla页面以及这些页面中的所有链接和脚本都可以安全地以这种方式加载。试试这个例子：

jQuery('#question-header').load('http://stackoverflow.com/', function(){
    //Your callback to-dos
})

这会将stackoverflow主页加载到本页顶部问题标题框中的此页面。

如果我是你，我肯定会使用iframe，因为我不得不采取更少的风险。

创建一个不会跨网页重新加载的DIV标记

3 个答案: