JavaScript 问题、替换 iframe 的 src 和后退按钮

Question

我正在为我正在做一些开发工作的网站上的视频制作弹出窗口。这个想法是点击视频的缩略图，然后视频弹出页面。就像 facebook 如何使用他们的图像查看器一样。我目前有一个 div 标签，它的 CSS 显示属性设置为 hidden 和一个没有 src 的 iframe。当用户点击视频的缩略图时，我让 JavaScript 通过这种方法将适当的 youtube 嵌入链接加载到 iframe 中：

document.getElementById('iframe-id').src = "http://www.youtube.com/embed/(videoID)";

视频设置为自动开始播放。当用户退出弹出的内容时，iframe 的 src 然后通过相同的方法设置为“”。它工作正常，视频不再在 iframe 中。问题在于后退按钮。

这是导致我的问题的过程：

1. 我单击缩略图和 视频弹出并开始播放。
2. 我关闭了弹出的内容。
3. 我按下返回按钮。
4. 我之前弹出的视频正在后台播放。 （问题）

这是我所知道的正在发生的过程：

• 正在查看的页面有两个 背靠背创建的实例 浏览器的历史。 （即我按下 后退按钮和我在同一页面上 仍然..这也是视频的时候 特别开始玩 浏览器）
• 当我离开弹出的内容时 打开并按下后退按钮，我看到了 只是一个空的 iframe。

我相信我的问题在于我将 src 更改为 iframe。该过程似乎导致浏览器再次加载页面并在历史记录中创建同一页面的第二个实例（重新加载页面不会）。当按下后退按钮时，页面会转到上一个实例，但根据浏览器的不同，隐藏的 iframe 并不总是空的，并且正在播放视频。

我的问题：

• 能否解决此问题 JavaScript？
• 如果它不能完成我正在尝试的任务而没有创建同一页面的两个单独实例的问题？我在想 AJAX 可能是解决方案，但我不知道。我对这一切还是有点陌生​​。

Answer 1

这可以在 javascript 中解决。

此外，AJAX 与您遇到的问题无关。 AJAX 是一种用于移动数据的机制，而不是操纵 HTML 文档。

如果您只需要显示视频，则不需要使用 iframe 来执行此操作。我建议在页面某处保留一个隐藏的div，并将其用作视频弹出窗口的容器。当您需要显示视频时，将您需要的任何 HTML 插入到 div 中，并在准备好时显示它。