javascript - 单击 href 更新 iFrame src

Question

我在下面有以下代码，我正在尝试这样做，以便当用户单击他们希望从中观看视频的视频流网站的文本时，它会在 iframe 内更新。

<iframe src="<!-- Desired URL from a href should be here -->" height="240" width="100%">

<ul class="video-links">
   <li><a href="https://our-unique-url-for-this-title.com">YouTube</a></li>
   <li><a href="https://our-unique-url-for-this-title.com">Vimeo</a></li>
   <li><a href="https://our-unique-url-for-this-title.com">DailyMotion</a></li>
   <li><a href="https://our-unique-url-for-this-title.com">Veoh</a></li>
   <li><a href="https://our-unique-url-for-this-title.com">Crackle</a></li>
</ul>

我怎样才能通过添加更多的方式来扩展 <li>标记到我们的 video-links ul类(class)？

Answer 1

完整的工作代码:

<iframe id="myiframe" src="" height="240" width="100%"></iframe>

<ul class="video-links">
   <li><a href="https://our-unique-url-for-this-title.com" onclick="return changeSrc(this)">YouTube</a></li>
   <li><a href="https://our-unique-url-for-this-title.com" onclick="return changeSrc(this)">Vimeo</a></li>
   <li><a href="https://our-unique-url-for-this-title.com" onclick="return changeSrc(this)">DailyMotion</a></li>
   <li><a href="https://our-unique-url-for-this-title.com" onclick="return changeSrc(this)">Veoh</a></li>
   <li><a href="https://our-unique-url-for-this-title.com" onclick="return changeSrc(this)">Crackle</a></li>
</ul>

<script>
function changeSrc(obj)
{
    document.getElementById("myiframe").src = obj.href;
    return false;
}
</script>

现在解释一下我对您的代码所做的一些修改:

• iframe 标签必须关闭，否则页面将无法正确显示。
• 您必须使用 JavaScript 动态修改页面。
• 您可以在script 标签中编写JavaScript 函数。
• onclick 是一个回调，当用户点击页面中的某些内容时调用。我们调用 changeSrc 函数，传递 this 作为参数，因为我们想传递我们正在点击的对象。
• 我们必须返回false，否则页面将跟随href 属性中的链接。有其他替代方法，但我尽量使我的解决方案简单。
• 我们为您的 iframe 分配了一个 id 并让它管理它的属性，例如 src，因此它可以被设置。<