如何 select 一个 iframe 并将其 src 传递给一个函数

Question

我有一个 javascript 文件，它显示了从 youtube 嵌入并显示在网格中的可变数量的视频。我需要用户能够 select 一个视频并单击提交，我将在变量中存储该视频的 src link。

下面是相关的 javascript 部分：

 playListItems.forEach(item => {
      const videoId = item.snippet.resourceId.videoId;
      output += `
        <div class="col s3">
        <iframe width="100%" id="videoFrame" height="auto" 
         src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" > 
         </iframe></div>
      `;
  }

HTML:

   <form id="form1">
       <div class="input-field">
          <input type="submit" id="but1" value="Save Selection">
       </div>
   </form>

如何使用事件处理程序或任何其他可能的解决方案来做到这一点？

Answer 1

尝试some_var = document.getElementById("videoFrame").src

Answer 2

为什么不使用 const videoId 作为每个 iframe 的 id？因为您不能多次使用 id。然后在每个 iframe 元素的 onclick 处理程序中，您可以触发一个函数，将 <input type="submit" id="but1" value="Save Selection"> 的值设置为 this.id。像这样：

 playListItems.forEach(item => {
      const videoId = item.snippet.resourceId.videoId;
      output += '<div class="col s3">
        <iframe width="100%" id="${videoId}" height="auto" 
         src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" onclick='submitVid(this.id);'> 
         </iframe></div>';
  }

那么 submitVid(video) 函数将如下所示：

function submitVid(video) {
   //the video variable will hold this.id or the videoId
   //Here you can do whatever you want with video.
   //Full video id:
   var url = "https://www.youtube.com/embed/" + video + "?rel=0";
   //pass value to a textfield to submit
   document.getElementById("textfield").value = video;
}

最好只存储 videoId 而不是完整的 url。它节省 space 并且速度更快。

希望对您有所帮助！如果没有，请评论

如何 select 一个 iframe 并将其 src 传递给一个函数

How to select an iframe and pass its src to a function

javascript

html

iframe

src