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

Question

我正在为我正在做一些开发工作的网站上的视频弹出工作。我们的想法是点击视频的缩略图，然后点击视频弹出窗口。就像facebook如何使用他们的图像查看器。我目前有一个div标签，其CSS显示属性设置为隐藏，iframe没有src。当用户点击视频的缩略图时，我会通过此方法将适当的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中正常工作，并在准备就绪时显示。