使用 jQuery 更改和加载 iframe 的“src”属性

Question

我是 jQuery 的新手，对我的网页设计总体上很生疏。我的网站上有一个页面，其中有 12 个按钮和一个 iframe，该 iframe 是从直播网站嵌入的，显示视频。我想要的只是让每个按钮将来自该站点的不同视频加载到 iframe 中，而无需简单地重新加载整个页面。我已经搜索并看到了一些 jQuery 与 iframe 交互的示例，但是太复杂了，我无法完全理解。有人可以提供一个简单的例子来说明我需要做什么吗？我只需要 jQuery 更改 src 值并在用户单击其中一个按钮时重新加载 iframe。

这是我正在玩的代码

<div id="chanelShowEmbed" class="embed-responsive">
      <iframe id="chanelShow" class="embed-responsive-item" src="chanel1 url" onLoad='$("#popLoad").fadeOut("slow");' allowfullscreen>  </iframe>
    </div>
  <div class="col  m-auto"> <img id="channel1" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel2" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel3" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel4" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel5" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel6" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel7" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel8" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel9" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel10" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel11" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel12" class="chanel" src="image url"> </div>

JS代码

var listChanels = {
    "channel1":"channel url",

    "channe2":"channel url",

    "channe3":"channel url",
    "channe4":"channel url",
    "channe5":"channel url",
    "channe6":"channel url",
    "channe7":"channel url",
    "channe8":"channel url",
    "channe9":"channel url",
    "channel0":"channel url",
    "channel1":"channel url",
    "channel2":"channel url",

我在这里错过了什么？

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

为每个按钮分配数据属性可能有意义，其中数据源是您希望在单击时分配给 iframe 的来源url。

所以 HTML 看起来像这样...

<img class="channel" data-src="your Channel Source" src="image source"></img>

然后当用户单击图像时，您可以分配一个 jQuery 侦听器以将来自数据属性的源分配给 iframe，就像这样...

$('.channel').click(function(){
  var s = $(this).data('src');
  $('#channelShow').attr('src', s);
});

请注意，我在您的 class 和 ID 名称中添加了一个 'n'，因为我想正确拼写频道 :)

使用 jQuery 更改和加载 iframe 的“src”属性

Changing and loading an iframe ‘src’ attribute with jQuery

html

video

iframe

jquery

src