Question

是否有一篇好文章或iframe或框架如何与每个页面异步工作？我有一个底部/固定div包裹在jquery中滑动包含MP3播放器的悬停。我用iframe引用了播放器。我渲染得很好，但如果没有重新加载页面刷新或导航到另一个页面，它怎么能继续播放？我希望它固定在每个页面的底部并连续播放而不刷新。我尝试将iframe放在每个页面中，但仍然无效。有任何想法吗？谢谢。

Answer 1

如果它必须留在浏览器中（不是在音乐/视频播放器中下载应用程序或读取流），唯一的方法应该是不要真正更改页面，并加载必须使用ajax或javascript更改的内容（或者将它本身放在（i）框架中。）

但是，只使用lector并在您的网站上放置一个链接以在另一个标签中打开它会更容易：

<a href="/music-player.htm" target="musicPlayer">Text or what you want</a>

修改：

因此使用javascript它会与ajax相同，但这意味着不会更改页面，所以对于搜索引擎优化，如果它有点重要，那就不好了。

我的意思是javascript是例如，如果你点击链接“home”只是动态添加<script type="text/javascript" src="/homepage.js"></script>修改页面内容（同时保留mp3播放器）。

另外，如果可以通过javascript知道玩家，可能会使用cookie：

知道播放器的mp3文件
在播放播放器的mp3中的时间是
去指定的mp3文件
以mp3的指定时间前往
（如果可以暂停播放器，则应该能够知道播放器是否正在播放）

当改变页面以获得好时光时（但是有时间加载没有音乐的页面和mp3播放器）是可能的。

或者可能有MP3播放器可以节省我们的时间，并且此时开始在另一页上（但仍然在更改页面没有声音几秒钟）。

使用这些方法也会打开几个页面。

修改：

我尝试了iframe中页面内容的方式，它运行得相当好，但需要在mp3模式下切换。

这是mp3.html（放入根文件夹，如果不可能，则需要进行一些更改）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>MP3 Player</title>
  <style type="text/css">
        html { 
        font-size: 100%; 
        } 
        body { 
            margin: 0; 
            padding: 0em;
        }
        #frame { width: 100%; height: 100%; border: none; }
        #player { position: absolute; right: 20px; bottom: 20px; }
    </style>
    <script type="text/javascript">
        if ("onhashchange" in window) {
            var h='';
            var command= false;
        window.onhashchange = function(){
                if(location.hash==h) return;
                command= true;
                window.frames['frame'].location.replace(location.hash.replace(/^#/,""));
                h= window.location.hash;
            }
        }
    </script>
</head>
<body>
    <iframe id="frame" onLoad="if(this.src=='')return;if(command)command=!1;else window.location.replace(h='#'+window.frames['frame'].location.href.replace(new RegExp('^'+document.location.origin),''));document.title=window.frames['frame'].document.title;"></iframe>
    <script type="text/javascript">
        document.getElementById("frame").src=document.location.hash.replace(/^#/,"");
    </script>
    <div id="player">
        <object type="application/x-shockwave-flash" data="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://s301826463.onlinehome.fr/so/dewplayer.swf?mp3=http://s301826463.onlinehome.fr/so/Tokyo.mp3"></object>
        <a href="javascript:document.location.href=document.location.hash.replace(/^#/,'')">remove mp3 player</a>
    </div>  
</body>
</html>

要设置一个在iframe和mp3播放器中打开当前页面的链接，它只需要一个链接：

<a href="javascript:parent.location.href='/mp3.html#'+document.location.href.replace(new RegExp('^'+document.location.origin),'')">add mp3 player</a>

使用here的示例。

Answer 2

要么在浏览器窗口外有一个独立的Flash / Java / Unity等播放器或者，您使用框架，两个框架，一个显示主网站页面，另一个显示播放器所在的框架其他方法是使用异步调用（Ajax）在您的站点（您希望播放器连续）中进行整个导航。

Google b.t.w使用iframes / frames

让<iframe>异步工作</iframe>

2 个答案: