javascript - 点击替换 iFrame src？

Question

目前我有下面的列表，需要更新现有 div 内的 iFrame。

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

上面的部分是我们需要更新的 iFrame，下面的部分是我们必须在点击时选择的流列表。

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>

我想知道我们如何才能轻松地完成这项工作，并且如果 a 有一个 active 类，那么 iframe 使用该部分 data-video 进行更新，然后在单击另一个 a href

时取消设置默认事件状态

Answer 1

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>


<script>

  function changeSource(e){
  
  var t = e.getAttribute("data-video");
  document.getElementById("iFrameElement").src=t;
  
  }

</script>

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>


<script>

  function changeSource(e){
  
  var t = e.getAttribute("data-video");
  document.getElementById("iFrameElement").src=t;
  
  var eSet = document.getElementsByTagName("a");
  var i = 0;
  
  while(i < eSet.length){
  
    eSet[i].className = "";
  
    i++;
  }
  
  e.className = "active";
  
  }

</script>