ランダムなiframeの内容

リストからランダムなURLを読み込むiframeを自分のウェブサイトに作成したいと思います。私はこのランダムなiframeの内容

<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <iframe class="frame" src="" style="width:200px; height: 200px"></iframe> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script> 
 
    var cat1 = [ 
 
"https://www.youtube.com/watch?v=2XG_0iV2B40", 
 
"https://www.youtube.com/watch?v=QnxpHIl5Ynw", 
 
]; 
 

 
    var myFrame = document.getElementsByClassName("frame"); 
 

 
    function getRandomUrl(myFrame) { 
 
     var index = Math.floor(Math.random() * cat1.length); 
 
     var url = cat1[index]; 
 
     myFrame.src = url; 
 
    } 
 

 

 
    function codeAddress() { 
 
     getRandomUrl(myFrame); 
 
    } 
 
    </script> 
 
    <script type="text/javascript"> 
 
    codeAddress(); 
 
    </script> 
 
</body> 
 

 
</html>

を試してみましたが、それはうまくいきませんでした。私は基本的に私が見つけることができたすべてを試みたが、何も理解できない。どんな助けもありがとうございます。ありがとう。

出典

2017-07-02 PRIVM

「うまくいかない」 - なぜ？代わりに何が起こったのですか？ –

'document.getElementsByClassName（" frame "）;' - HTMLCollectionを返します。try 'document.getElementsByClassName（" frame "）[0];' –

@JaromandaX私はまだ何もしませんでした、空のiframe – PRIVM

document.getElementsByClassName("frame")を使用していて、そのクラス名を持つすべての要素のコレクションが返されるという問題があります。特定のフレームにアクセスするには、最初の要素にdocument.getElementsByClassName("frame")[0]でアクセスする必要があります。これに加えて

、あなたはむしろ?v=videoIDから直接ビデオへのリンクより、YouTubeの埋め込みリンク（https://www.youtube.com/embed/[videoID]）を使用する必要があります。

あなたのリンクを更新し、変数を修正し、ビデオソースをコンソールに記録しました。 '実行コードスニペット' を複数回クリックすると、ランダムに動画を変更します：

var cat1 = [ 
 
    "https://www.youtube.com/embed/8PIPyPMNnp8", 
 
    "https://www.youtube.com/embed/gM2KaaVXs_g", 
 
]; 
 

 
var myFrame = document.getElementsByClassName("frame")[0]; 
 

 
function getRandomUrl(myFrame) { 
 
    var index = Math.floor(Math.random() * cat1.length); 
 
    var url = cat1[index]; 
 
    myFrame.src = url; 
 
} 
 

 
function codeAddress() { 
 
    getRandomUrl(myFrame); 
 
} 
 

 
codeAddress(); 
 

 
console.log(myFrame.src);

<iframe class="frame" src="" style="width:200px; height: 200px"></iframe>

ホープ、このことができます！ :)

出典

2017-07-02 23:57:45

ありがとう！それは今すぐうまくいく – PRIVM

答えて

関連する問題