隨機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 ...嘗試'document.getElementsByClassName（「frame」）[0];' –

@JaromandaX我這樣做，仍然沒有，空白iframe – PRIVM

問題是您使用的是document.getElementsByClassName("frame")，它返回所有具有該類名稱的元素的集合。要訪問您的特定框架，您需要使用document.getElementsByClassName("frame")[0]訪問第一個元素。

除了這個，你需要使用YouTube的嵌入鏈接（https://www.youtube.com/embed/[videoID]），而不是直接通過?v=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

隨機iframe內容

回答

相關問題