0

例: 2 つの異なる HTML コードがあり、1 つは埋め込まれた 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>

私が今したいことは、ユーザーがこのページに移動すると、最初にビデオが表示され、ビデオを見た後に次をクリックすると質問が表示されることです。

次のボタンを質問のある別のページにリンクさせたくありません。質問は同じページにロードする必要があります。

これを入れることができる最も単純な形式は、

  • ユーザーがページに移動します。
  • ビデオを見て、次をクリックします。
  • ビデオが消え、質問が表示されます。
4

3 に答える 3

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/

于 2013-06-06T00:58:01.323 に答える
0

おそらく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 = "";
}

この例では、[次へ] ボタンは常にクリックできるようになっています。より複雑なものを探している場合は、Youtube API をお勧めします。

于 2013-06-06T00:57:40.690 に答える