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标签来扩展规模？

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

Answer 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，某些人认为这是“不好”或“混乱”的做法。

单击href更新iFrame src

2 个答案: