iframeリンクの最後の部分を変更するためにユーザー入力を使用するにはどうすればよいですか？

プロンプトからのユーザーの入力で、iframeのURLの最後の部分を変更します。ここまでは私のコードです：iframeリンクの最後の部分を変更するためにユーザー入力を使用するにはどうすればよいですか？

私は3日間これをやろうとしていますが、まだそれを理解することはできません。助けてください。

2017-04-10 Useless

どこから入力しますか？入力ボックス？ –

をiframe

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style> 
 
    body{ 
 
     background-color:#ffffff 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <!-- im attempting to make an iframe display a video the user types into 
 
the prompt.--> 
 
    <p id="video"></p> 
 
    <iframe src="www.youtube-nocookie.com/embed/" allowfullscreen></iframe> 
 
    
 
    <script> 
 
     // By placing the script just before the end of the <body>, all the DOM elements will 
 
     // have loaded by the time the script runs. 
 
     
 
     // Get user input: 
 
     var videoURL = prompt("type the last part of the YouTube.com video URL here"); 
 
     
 
     if(videoURL != null){ 
 
     // Get a reference to the iframe and reset its src property: 
 
     var frame = document.querySelector("iframe"); 
 
     frame.src = frame.src + videoURL; 
 
     
 
     // Output the new URL 
 
     document.getElementById("video").innerHTML= "New src is: " + frame.src; 
 
     } else { 
 
     alert("please reload and type a URL."); 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

出典

2017-04-10 14:40:57

これは確かに有効ですが、 '' 'frame.src = frame.src + videoURL'''は、一度使用した後にURLを追加するため、一度しか使用できません。もちろん、彼はそれを求めていません、私の目のわずかな改善; – yarwest

私はこれを投稿した直後に、私は別のオプションを見つけました。プロンプトを使用する代わりに、新しいビデオが必要なたびにリロードする必要があります。私はページ自体に入力ボックスを使用しています。あなたの提案を入力ボックスで使用します。 :) – Useless

URLの最後の部分をJavaScript変数で割り当てる必要があります。これは、HTMLのレンダリング時にページを読み込まないためです。たとえば、videoFrameのために - - それを行うための最も簡単な方法は、あなたのiframeにIDを割り当てることであろうと、あなたはちょうどこの行うことができます：あなたはちょうどあなたの末尾に一行が欠落している

document.getElementById('videoFrame').src = "www.youtube-nocookie.com/embed/" + VideoURL;

出典

2017-04-10 14:37:45 freginold

ことが可能であるのsrcプロパティを設定するスクリプトはのsrc属性を変更するには、u JavaScriptを歌うと、それがあなたの問題に取り組む最良の方法だと思います。

まず、にidを追加することをお勧めします。例えば

：あなたは、変数VideoURLに格納されたユーザ入力を持っている場合は<iframe id="youtubePlayer" allowfullscreen></iframe>

は、あなたは我々が取得している

document.getElementById('youtubePlayer').src = "www.youtube-nocookie.com/embed/" + VideoURL;

ファーストのsrcを変更するために、次のコード行を使用することができます要素がdocument.getElementById()を使用している場合は、.srcに値を代入してソースを変更しています。

私はこれが助けてくれることを祈っています:)

出典

2017-04-10 14:46:34 yarwest

iframeリンクの最後の部分を変更するためにユーザー入力を使用するにはどうすればよいですか？

答えて

関連する問題