如何使用 javascript/jquery 根据 <select> 值更改 iframe 的 src 属性？答案

【问题标题】：How to change src attribute of iframe based on <select> value using javascript/jquery?如何使用 javascript/jquery 根据 <select> 值更改 iframe 的 src 属性？
【发布时间】：2018-09-23 07:31:40
【问题描述】：

我有一个 >20MB 的网页（太大），问题是 youtube 视频每个约为 500 KB！我想使用 HTML5 选择选项来列出 30 多个视频。该值是 youtube 视频 ID。然后用户从下拉选项中选择所需的视频。然后视频在 iframe 中加载。

<form>
    <select id="dynamic_select">
        <option value="" selected>Pick a Key and Peele youtube video</option>
        <option value="pSDTmJtE-Bc">Little Homie</option>
        <option value="Dd7FixvoKBw">Substitute Teacher</option>
        <option value="iGAMbNKcN1U">Fronthand Backhand</option>
    </select>
</form>

这是有效的“模板”，但我想用选定的选项值替换 src 字符串中的“nlD9JYP8u5E”。这个可以吗？

<article>
    <iframe src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"></iframe>
</article>

【问题讨论】：

您可以使用正则表达式进行更改
你有代码吗？
只是 html（显示）

标签： javascript jquery html iframe

【解决方案1】：

在.replace() 中使用正则表达式来更改iframe 的src 属性。在 jquery 中 .attr() 更改元素的属性，我在 change 选择元素的事件侦听器中使用了它

$("#dynamic_select").change(function(){
    var val = $(this).val();
    $("iframe").attr("src", function(i, a){
        return a.replace(/(?<=embed\/)[^?]+/, val);
    });
});

$("#dynamic_select").change(function(){
    var val = $(this).val();
    $("iframe").attr("src", function(i, a){
        return a.replace(/(?<=embed\/)[^?]+/, val);
    });
    console.log($("iframe").attr("src"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="dynamic_select">
    <option value="" selected>Pick a Key and Peele youtube video</option>
    <option value="pSDTmJtE-Bc">Little Homie</option>
    <option value="Dd7FixvoKBw">Substitute Teacher</option>
    <option value="iGAMbNKcN1U">Fronthand Backhand</option>
  </select>
</form>
<article>
  <iframe src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"> 
</iframe>
</article>

【讨论】：

【解决方案2】：

为您的文章添加一个 id (

let target=document.getElementById('viewvideo'), myiframe=document.createElement('iframe'); myiframe.src='the url i want to display'; target.innerHTML='';/** empty the previous one then set content with current iframe*/ target.appendChild(myiframe);

当然，“我要显示的 url”的字符串会像 onChange 事件一样从值中给出。

【讨论】：

【解决方案3】：

这可以通过 JavaScript 完成。

这个脚本的作用是在点击按钮时调用函数submitted，这个函数会改变视频的来源。

我没有使用<input type="submit">，因为这会重新加载页面，我不知道如何防止这种情况发生。

<script>
function submitted(){
    link = document.getElementById("dynamic_select").value;
  document.getElementById("video").src = "https://www.youtube.com/embed/"+link+"?rel=0&amp;showinfo=0";
}
</script>
<form onsubmit="return false;">

<select id="dynamic_select">
<option value="" selected>Pick a Key and Peele youtube video</option>
<option value="pSDTmJtE-Bc">Little Homie</option>
<option value="Dd7FixvoKBw">Substitute Teacher</option>
<option value="iGAMbNKcN1U">Fronthand Backhand</option>
</select>
<button onclick="submitted()">Submit</button>
</form>

<article>

<iframe id="video" class = "youtube" src="https://www.youtube.com/embed/nlD9JYP8u5E?rel=0&amp;showinfo=0"> 
</iframe>

</article>

【讨论】：