让<iframe>异步工作

Gra*_*ham 6 javascript iframe jquery mp3

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

Enk*_*nki 2

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

但是,创建一个仅包含 lector 的页面并在您的网站上放置一个链接以在另一个选项卡中打开它会容易得多:

<a href="/music-player.htm" target="musicPlayer">Text or what you want</a>
Run Code Online (Sandbox Code Playgroud)

编辑 :

因此,使用 javascript 会得到与 ajax 相同的结果,但这意味着不更改页面,因此对于 SEO 来说,如果它有点重要,那就不好了。

我所说的 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>
Run Code Online (Sandbox Code Playgroud)

要将打开当前页面的链接放在 iframe 中并使用 mp3 播放器,只需要一个链接:

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

这里有一个使用它的例子。