单击一个 href 更新 iFrame src答案

【问题标题】：Update iFrame src a click of a href单击一个 href 更新 iFrame src
【发布时间】：2018-10-29 20:53:25
【问题描述】：

我在下面有以下代码，我正在尝试这样做，以便当用户单击他们希望从中观看视频的视频流媒体网站的文本时，它会在 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 类中？

【问题讨论】：

如何捕捉事件？你如何选择一个元素，比如 iframe？你如何改变一个属性？您的问题中没有代码可以显示您在解决哪些问题时遇到了问题
@Taplar 我在问如何让我的a href 在点击时iFrame 的src 值，你不明白吗？
我不明白您的具体问题是什么。不用说你的问题是什么，这就是一个编码请求。你已经说出了你想要的。你没有说明你自己做的有什么问题。
@Taplar 这肯定不是“编码请求”，他问的是如何在点击时更新元素，是什么让他的问题与其他数百个完全相同的问题不同？跨度>
@Placeholder 其他问题显示了解决问题的努力。这个问题没有。那是编码请求的标志。

标签： javascript jquery html

【解决方案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作为参数，因为我们要传递我们点击的对象。
我们必须return false，否则页面将跟随href属性中的链接。有其他替代方案，但我试图让我的解决方案变得简单。
我们将id 分配给您的iframe 并让它管理其属性，例如src，因此可以对其进行设置。

【讨论】：

【解决方案2】：

这是 FonzTech 的答案中添加的一些语法糖。

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

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

<script>
    // Get a NodeList of all li elements inside .video-links
    let elements = document.querySelectorAll('.video-links li')

    // Loop through each item in the NodeList
    elements.forEach((el) => {
        // Add a click event to each item
        el.addEventListener('click', () => {
            // Scrape the data-link attribute from the current li element
            let link = el.attributes['data-link'].value;

            // Set the iframe's src attribute
            document.getElementById("myiframe").src = link;
        });
    });
</script>

我建议不要使用锚标记的 href 属性来存储数据，而是使用自定义数据属性，因为这正是它们的用途。除此之外，您不必阻止浏览器跟踪链接。

此解决方案也不使用内联 JS，有些人认为这是一种“糟糕”或“混乱”的做法。

【讨论】：