Html 我想创建一个可单击的按钮，每次从视频链接列表中单击时加载不同的iframe_Html

Html 我想创建一个可单击的按钮，每次从视频链接列表中单击时加载不同的iframe

html

Html 我想创建一个可单击的按钮，每次从视频链接列表中单击时加载不同的iframe,html,Html,所以我不知道从哪里开始，但我需要使用iframe，点击一个按钮，将不同的视频源从视频链接列表加载到iframe中。您需要javascript来动态更改iframe url JSFiddle: 一个例子胜过千言万语说明：如果这是iframe元素： <iframe id="ifr"></iframe> 您可以使用javascript代码中定义的函数在此框架中加载URL： <script> // all available urls var

所以我不知道从哪里开始，但我需要使用iframe，点击一个按钮，将不同的视频源从视频链接列表加载到iframe中。

您需要javascript来动态更改iframe url

JSFiddle:

一个例子胜过千言万语

说明：

如果这是iframe元素：

<iframe id="ifr"></iframe>

您可以使用javascript代码中定义的函数在此框架中加载URL：

<script>
   // all available urls
   var listOfUrls = ["url1", "url2", "url3"];
   // current url pointer
   var pointer = 0;

   function loadNewVideo() {
     // get iframe element by id
     var el = document.getElementById('ifr');
     // update pointer
     if(pointer + 1 >= listOfUrls.length) {
        pointer = 0;
     } else {
        pointer++;
     }
     // get new url
     var newUrl = listOfUrls[pointer];
     // assign new url to src property
     el.src = newUrl; 
   }
</script>


//所有可用的URL
var listOfUrls=[“url1”、“url2”、“url3”]；
//当前url指针
var指针=0；
函数loadNewVideo（）{
//按id获取iframe元素
var el=document.getElementById（'ifr'）；
//更新指针
如果（指针+1>=listOfUrls.length）{
指针=0；
}否则{
指针++；
}
//获取新url
var newUrl=listOfUrls[pointer]；
//将新url分配给src属性
el.src=newUrl；
}

现在可以将此函数绑定到按钮元素：

<button onclick="loadNewVideo()"></button>