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

Question

我有一个 >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>

这是工作"template"，但我想用选定的选项值替换 src 字符串中的“nlD9JYP8u5E”。这能做到吗？

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

Answer 1

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

$("#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>