在HTML代碼中使用JavaScript變量

我試圖製作一個YouTube 2.0 html的東西，（有趣的學習經驗）。我希望能夠點擊「加載視頻」鏈接，並要求您鏈接到實際的YouTube視頻。然後，當您粘貼它時，它會在頁面上顯示視頻。

我的代碼是

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1> 
 
<a href="#" onclick="openVideo()">Load video</a> 
 
<script> 
 
\t var theVideoLink; 
 
\t 
 
\t var openVideo = function() { 
 
\t \t var videoLink = prompt("Video link on YouTube.com"); 
 
\t \t theVideoLink = videoLink; 
 
\t }; 
 
\t 
 
\t window.onload = function() { 
 
\t \t document.getElementById("myLink").innerHTML=theVideoLink; 
 
\t } 
 
</script> 
 

 
<iframe width="1120" height="630" src="myLink" frameborder="0" allowfullscreen></iframe>

如果你對我如何可以插入JavaScript變量到我的IFRAME SRC標籤的任何想法，請告訴我。謝謝！

來源

2017-04-02 RugbugRedfern

的Youtube 2.0。？什麼是* 2.0.-ish *在你的代碼中？另外，如果您指的是https://developers.google.com/youtube/2.0/developers_guide_protocol，則我的問題是：您是否打開了該頁面？ –

它實際上並不是YouTube 2.0。我就是這麼稱呼的。這不是一個商業項目，我只是在亂搞。 – RugbugRedfern

'width =「1120」'......不。歡迎來到響應時代。使用CSS樣式表，使用'％'或其他響應單元。避免使用內嵌'樣式' –

你不能改變IFRAME SRC但我們可以更換新的iframe中。

請注意，我已將您的iframe ID設置爲myLink，替換src屬性。

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1> 
<a href="#" onclick="openVideo()">Load video</a> 

<iframe width="1120" height="630" id="myLink" frameborder="0" allowfullscreen></iframe> 
<script> 
openVideo = function() { 
    var videoLink = prompt("Video link on YouTube.com"); 
    var iframe=document.getElementById('myLink'); 

    var new_iframe = document.createElement("iframe"); 
     new_iframe.src=videoLink; 

    let attr; 
    let attributes = Array.prototype.slice.call(iframe.attributes); 
    while(attr = attributes.pop()) { 
    if (attr.nodeName!='src') 
     new_iframe.setAttribute(attr.nodeName, attr.nodeValue); 
    } 

    iframe.parentNode.replaceChild(new_iframe, iframe); 
} 
</script>

確保嵌入嵌入鏈接，格式如下：

https://www.youtube.com/embed/MEVYajbHmb4

工作JS提琴：

https://jsfiddle.net/aa0kzqsz/2/

來源

2017-04-02 21:34:40 Anonymous

再次更新答案，以便在加載多個視頻時不會卡住。 – Anonymous

此代碼將導航到提示對話框中鍵入的URL。

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1> 
<a href="#" onclick="openVideo()">Load video</a> 
<script> 

var openVideo = function() { 
    var videoLink = prompt("Video link on YouTube.com"); 
    window.open(videoLink, "myLink"); 
}

<iframe width="1120" height="630" name="myLink" frameborder="0" allowfullscreen></iframe>

希望這有助於。

更新：此代碼僅導航給定的URL。你應該使用Youtube嵌入選項而不是這個。

來源

2017-04-02 21:19:22 Nobody

由於相同的原產地策略，不能使用多個視頻。 – Anonymous

是的，我會添加這個信息。但他問如何用js代碼導航iframe。我剛剛回答了這個問題。 – Nobody

在你的代碼中，iframe是錯誤的。您需要指定「myLink」爲id而不是src。

然後，您需要將youtube鏈接（類似於「https://www.youtube.com/watch?v= {videoId}」）轉換爲iframe鏈接（與「https://www.youtube.com/embed/ {videoId}」類似）。爲了實現這一點，你需要了解正則表達式。下面的工作：

var ytLink = prompt('Give me a youtube link please !'); 
 
var iframe = document.getElementById('youtube'); 
 
var ytId = ytLink.match(/v=([-A-Za-z]+)/)[1]; 
 

 
iframe.src = 'https://www.youtube.com/embed/' + ytId;

<iframe width="560" height="315" src="" id="youtube" frameborder="0" allowfullscreen></iframe>

，我建議你瞭解更多關於正則表達式的MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

來源

2017-04-02 21:20:18 Nek

你應該在執行'[1]之前檢查'ytId'' –

轉換嵌入鏈接的好處，但是由於相同的原始策略，你不能更改iframe的src。 – Anonymous

這是一個簡單的代碼，僅適用於您輸入嘗試URL的特定情況。如果你使用它，你顯然需要更多的檢查。另外，我不建議使用提示。這僅用於示範。 – Nek

-1

您必須使用嵌入的鏈接，而不是完全鏈接

的

like：https://www.youtube.com/embed/videoID

\t 
 
\t var openVideo = function() { 
 
\t \t var videoID = prompt("Video id on YouTube.com"); 
 
    var embed = 'https://www.youtube.com/embed/' 
 
\t \t document.getElementById("myFrame").src=embed+videoID; 
 
\t }; 
 
\t

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1> 
 
<a href="#" onclick="openVideo()">Load video</a> 
 

 

 
<iframe id=myFrame width="1120" height="630" src=# frameborder="0" allowfullscreen></iframe>

來源

2017-04-02 21:24:05 MoolsBytheway

由於源策略相同，您無法更改iframe的src。 – Anonymous

你可以在使用嵌入式鏈接時，試着用這個ID'ZYlG9Id9H5s'。並且可以請您刪除您的-1 – MoolsBytheway

在HTML代碼中使用JavaScript變量

回答

相關問題