如何在 JavaScript 中从 html 引用 iframe

Posted 2023-05-09

【中文标题】如何在 JavaScript 中从 html 引用 iframe

【英文标题】：How to refer a iframe from html in JavaScript

【发布时间】：2014-04-04 21:26:39

【问题描述】：

我刚开始学习 html 和 CSS，现在我想添加一点我不知道的 javascript！

我想创建一个随机按钮，在 iframe 中显示随机嵌入视频（例如 1-5 个视频）。我搜索了谷歌，发现了一个 JavaScript/(jQuery?)：

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function() 

var array=["Item1", "Item2", "Item3", "Item4", "Item5"];
$('#button').bind('click', function() 

    var random = array[Math.floor(Math.random() * array.length)];
    $("h1").html(random);
);
);
</script>

用html：

<h1>Will be replaced</h1>
<button id="button">Random</button>

例如，在我的 html 中，我得到了：

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

我希望这个嵌入的视频显示在页面上，当你点击随机按钮时，它应该变为 1-5 个视频。如何在 JavaScript 中将其设置为一个项目，以便每个项目都有一个视频？

问题 2：

有时会生成相同的数字，这将导致相同的项目。

我希望有人可以教我一些关于这方面的知识！

【问题讨论】：

如果您第二次点击随机按钮，应该将 iframe 替换为另一个 iframe，还是应该将另一个 iframe 添加到页面中？

感谢您的快速响应，我希望将 iframe 替换到原来的位置。或者如果可能的话，是否应该替换 iframe 中的视频？通过在 js 中使用源选项？

好吧，你冷设置了一个新的 src 到 iframe...我会在几分钟内制作一个小脚本来演示...

谢谢！我等着看它

如果你给 iframe 一个 ID，你可以很容易地选择它，就像你选择按钮一样：<iframe id="video"> 可以用 $("#video") 选择，然后你可以使用 @ 设置 src 属性[e-mail]/attr

【参考方案1】：

它可能不多，但它是一个起点： Click me

刚刚获得了我能找到的前 5 个视频 ID :))

这里是 Js：

$(document).ready(function() 
    var array=["FOIjvHjK0Rw", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    $('#button').bind('click', function() 
        var random = array[Math.floor(Math.random() * array.length)];
        $("h1").html(random);
        var url="http://www.youtube.com/embed/"+random;
        $('#frame').attr('src', url);
        $('#frame').css('visibility','visible');
    );
);

【讨论】：

我不经常使用 jQuery :))...我更喜欢纯 js

这里的基本部分是纯 JS，使用 jquery 使用 css 语法和绑定事件处理程序（跨浏览器）更容易选择。这是一个使用相同逻辑的纯 JS 版本：jsfiddle.net/BH6UT/3

感谢您的帮助！现在我不再需要标题来查看随机按钮的工作了。现在唯一的问题是它有时会生成相同的视频，如何排除再次生成的活动视频？

Alot 感谢它所能获得的所有帮助！ :) hyperboleandahalf.blogspot.no/2010/04/…

你真的想使用 jQuery 吗？..我认为在纯 javascript 中会更容易......