我应该使用iframe而不是ajax吗？

Question

我们正在构建一个带有音频播放器的Drupal网站，该网站应该在您浏览页面时继续播放（类似于soundcloud）。

目前我们正在使用ajax加载点击的<a>网站，并将html注入页面并使用history.js来操作该位置。

但是存在一个重大缺点：

由于新加载的页面上可能有不同的css和js，我们必须将当前脚本，样式和链接元素与ajax响应文本（丑陋的正则表达式）进行比较，并且只添加新的但不存在的元素。通过这样做，加载另一个页面一旦执行脚本就不会删除/删除/撤消。这可能会成为一个性能问题（反正是针对标记的正则表达式）。

使用iframe可以解决这个问题和其他问题：

首次点击网站上的链接时，页面内容将替换为仅加载页面的iframe。音频播放器是原来的dom，i。即在iframe之外。单击iframe内的链接可以在历史记录api中捕获和使用。

所以，虽然我从未想过我会这么认为：我认为使用iframe可能是更好的选择，不是吗？

PS：我的主要问题是我无法控制网站上的不同页面有不同的脚本，样式确实没问题。如果网站上只有一个巨大的静态js和css，我没有遇到任何问题。

更新

iframe解决方案工作正常，但在iOS中除外。 iframes就像地狱一样。不过，我认为我们将采用iframe解决方案。

Answer 1

我会说......保持简单，愚蠢。 转到iframe解决方案，我知道它会扼杀你灵魂的一部分，但它是解决问题的最简单方法，代表了未来遇到问题的最低变化。

KISS。

Answer 2

我没有看到你不应该使用iframe的原因。我认为使用iframe在您的网站中嵌入页面很好。这就是iframe的用途。

过去，iframe对搜索引擎优化不利，但今天网页抓取工具通常可以在您的网站和iframe内容之间传输。

使用iframe对您来说更简单，更简单，而不是使用＆＃34;丑陋的正则表达式＆＃34;。为什么不保持简单，对吧？ KISS principle

Answer 3

你可以尝试做一些奇怪的事情。

首先，您可以将window对象与新对象进行比较，并删除所有额外属性（here's an example）。同样的事情可以做document，HTMLElement，Array.prototype对象和其他可能通过脚本扩展的对象。这样你就可以消除很多定义的东西，垃圾收集器会在某些时候放弃它。

其次，您要删除所有事件侦听器。这可以通过重新定义addEventListener等（refer to this question for example）来实现。

第三，你不应该忘记间隔和超时，可以使用与前一个相同的方法处理（包裹setTimeout等）（found it here）。

当然会留下很多东西，具体取决于页面中运行的脚本。因此，当用户在没有播放歌曲时点击链接时可以刷新页面（可能在曲目之间转换）。看到？要做很多工作，这可能一事无成。因此，在所有这些理论之后，我会使用iframe。因为，你知道，例如：如果你的某些网站的脚本包装了任何js函数（就像我们在第二次和第三次那样），那么ajaxing会在这个函数上堆积调用，这真的很糟糕。

Answer 4

如果你不介意的话，我想问你几个问题并在回复时编辑这个回复。 原因是我相信你在开始这个项目时做出了一些不方便的架构决策。根据您的描述我假设您在点击标签时加载静态html页面，如果没有，您的后端技术是什么？

理想情况下，您应该将逻辑分为前端和后端，并将前端分为模型，视图和控制器，不一定是使用框架工作，或者通过这样做（或MVVM，如角度那样）一些快速建议关于你如何加载数据，不要直接注入html，使用你的后端技术将json或xml发送到前端，并解析它以显示你的html，驻留在前端的模板上，而不是发送你的dom ，这将是不必要的缓慢和昂贵。当你有一个后端时，尝试在黑盒子环境中构建你的持久层，并通过一个简单的API调用操纵器方法，这样会更干净，执行更快，更可靠。同样，当您构建移动本机应用程序时，您只需重新使用API​​层。

关于css和js的正则表达式比较听起来像是一个完全糟糕的黑客，我同意，它更适合使用iframe，但同样，我需要更多信息来讨论你的整体设置并希望能帮助你更广泛透视。

更新：

我理解为什么页面可能有不同的CSS，但我认为你的音乐播放器js应该是相同的源，并附加不同的媒体ID。假设这个设置，在您的drupal数据库中，我假设是MySql，为“音乐播放器”页面创建一个自定义表，除了标准id索引条目以及created_at，modified_at等之外，还有一个可播放源的字段。

在您创建实际播放器的Drupal前端模板上，从数据库中写入此源ID。这样你的音乐页面就有一页。对于CSS，将所有内容保存在一个文件中，也许使用SASS或LESS之类的东西来编译你的css文件，以保持一切顺序。

在一个要点中，有你的drupal方面，php用嵌入式JS编写你的html页面，并且通过PHP变量将ID从DB传递到前端，因为PHP渲染发生在服务器端，当DOM加载时与您的JS一起，页面ID将出现。希望这有帮助，如果您有更多问题，请告诉我。

Answer 5

正如你所说，

使用iframe可以解决此问题和其他问题： 首次单击站点上的链接时，页面内容将替换为仅加载页面的iframe。音频播放器是原来的dom，i。即在iframe之外。单击iframe内的链接可以在历史记录api中捕获和使用。

你可以用ajax做类似的事情。将需要替换的所有内容放在一个容器中，然后根据ajax响应替换该容器的内容。请勿触摸该容器外部的内容。我认为这也将解决您的性能问题。