如何创建在导航期间不刷新的 iframe？答案

【问题标题】：How to create an iframe that does not refresh during navigation?如何创建在导航期间不刷新的 iframe？
【发布时间】：2014-01-02 13:11:23
【问题描述】：

我想向我的网站添加一个播放列表：访问者可以在浏览我的网站时听到一些声音。

我想通过在iframe 中插入播放列表来做到这一点，但是如何避免刷新iframe。我不希望在访问另一个页面后音乐再次重新开始。

有没有办法做到这一点？

【问题讨论】：

是的，没有机会，您需要查看网站的单页应用程序才能执行此操作，以免重新加载。像 Angular、Ember JS 等

标签： javascript jquery html iframe playlist

【解决方案1】：

听起来你正在做类似于SoundCloud 的事情。然后跳出框框思考。

如何让页面保持原位，并将新页面加载到当前页面的容器中。这样，您可以在“模拟”导航的同时保持播放器运行。在此过程中，您可以操纵浏览器的历史记录，以便前进和后退按钮仍然有效。

您可以使用HistoryJS，这是一个为旧版浏览器填充History API 的库。您可以将jQuery 用于所有 AJAX 内容。您可以劫持加载页面中的所有链接，而不是离开页面，而是通过 AJAX 加载页面。

// Listen for all link clicks inside the container
$('.container').on('click','a',function(event){

  // Prevent the link from moving the page
  event.preventDefault();

  // This is the location
  var href = this.href;

  // Do AJAX here
  // Manipulate history here

  // Done!
});

现在有了一个更简单的方法，为什么不使用弹出窗口来代替呢？ :D

【讨论】：

Soundcloud 是如何做到的，这是我认为 OP 想要的并且是一个完美的解决方案。 +1

【解决方案2】：

如果您的访问者进入新页面，您可以这样做。当前解决方案 - 通过“AJAX”加载新页面并通过 HTLM5 History API 将记录放入历史记录。结果 - 您的页面没有重新加载，音乐也没有停止。

或者使用多框架站点结构，但这是非常糟糕的主意。

【讨论】：