如何将JS实现为两段HTML代码

Question

例如:我有两个不同的HTML代码，一个是嵌入的YouTube视频:

<iframe width="560" height="315" src="http://www.youtube.com/embed/kZlXWp6vFdE" frameborder="0" allowfullscreen></iframe>

这是一个关于视频的问题:

<form>
    <h3> How was the video? </h3>
    <input type="button"name="option1" /> Good!
    <br/>
    <input type="button"name="option2" /> Bad!
</form>

我现在想做的是，当用户导航到这个页面时，他会先看到视频，然后在看完视频后，他会点击下一步，问题就会出现。

我不希望下一个按钮链接到问题所在的另一个页面，问题必须加载在同一页面上。

最简单的形式是

• 用户导航到该页面。
• 观看视频并点击下一步。
• 视频消失，问题出现。

Answer 1

你可以这样做:

<iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/kZlXWp6vFdE" frameborder="0" allowfullscreen></iframe>
<form id="form" style="display:none;">
    <h3> How was the video? </h3>
    <input type="button"name="option1" /> Good!
    <br/>
    <input type="button"name="option2" /> Bad!
</form>
<a href="#" id="next">Next</a>

和js:

document.getElementById('next').addEventListener('click', function() {
    document.getElementById('video').style.display = 'none';
    document.getElementById('next').style.display = 'none';
    document.getElementById('form').style.display = 'block';
});

演示:http://jsfiddle.net/Fs73d/2/

Answer 2

我能想到的最好的方法是使用Chromeless Youtube Player API。这将允许您通过JS添加一个事件处理程序来检查视频何时完成播放。然后，您可以继续显示表单。

这个类似的问题可能对你有帮助。

Answer 3

快速添加一个按钮，可能在iframe下面:

<input type="button" value="Next" id="btnNext"/>

确保你的表单在页面加载时是隐藏的，你可以通过多种方式做到这一点，我将只添加一些内联CSS:

<form style="display: none;">

我正在给你的iFrame添加一个ID，这将使它更容易定位:

<iframe id="iYoutubeVid" ../>

现在对于JS:

document.getElementById("btnNext").onclick = function() {
    document.getElementById("iYoutubeVid").style.display = "none";
    document.getElementById("btnNext").style.display = "";
}

在这个例子中，"Next"按钮总是可以点击的。如果你正在寻找更复杂的东西，我建议使用Youtube API。