更新 Youtube iframe

Posted 2023-05-09

【中文标题】更新 Youtube iframe

【英文标题】：Update Youtube iframe

【发布时间】：2013-02-03 08:26:57

【问题描述】：

我正在尝试使用 jQuery 动态 的 src 属性。 这是我的 html：

<iframe   src="" frameborder="0"   allowfullscreen></iframe>


<ul>        
<li>Reading comprehension. <span>
 http://www.youtube.com/embed/O9AuuYOdCGc?rel=0</span>
</li>
</ul>

还有 javascript

    $('.manipulated li').click(function(e) 
    var source = $(this).children('span').html();
    $('iframe').attr('src',source);
);

目标是在我点击 li 项目后，更新 iframe 的来源，用户将在同一个 iframe 播放不同的剪辑。

任何想法，这里有什么问题，或者如何做到这一点？

【问题讨论】：

你试过document.getElementById['iframeID'].src = newSource;吗？

【参考方案1】：

在 JQuery 中，当您使用 .html(); 时，它包含标记。在这种情况下，您将 iframe 的源设置为 <span>http://www.youtube.com/embed/O9AuuYOdCGc?rel=0</span>，而不仅仅是 url。 而是使用：

$('.manipulated li').click(function(e) 
    var source = $(this).children('span').text();
    $('iframe').attr('src',source);
);

【参考方案2】：

想出了不用任何 JavaScript 的方法 1.在iframe中添加id： 2.而不是span，添加标签到li，href属性等于youtube链接 3. 将标签定位到 iframe

<iframe name="testClip" id="testClip"   src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>

 <ul>
 <li>
 <a href="http://www.youtube.com/embed/O9AuuYOdCGc?rel=0" target="testClip">Reading comprehension.</a>
 </li>
 </ul>

在这种情况下，iframe 会自动更新。