使用 jQuery 更改和加载 iframe ‘src’ 属性

Posted 2023-05-09

【中文标题】使用 jQuery 更改和加载 iframe ‘src’ 属性

【英文标题】：Changing and loading an iframe ‘src’ attribute with jQuery

【发布时间】：2018-09-30 07:17:12

【问题描述】：

我对 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",

我在这里错过了什么？

任何帮助将不胜感激。

谢谢。

【参考方案1】：

为每个按钮分配一个 data 属性可能是有意义的，其中 data-src 是您希望在单击时分配给 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);
);

请注意，我在您的班级和 id 名称中添加了一个“n”，因为我想正确拼写 channel :)

【讨论】：

这正是我所需要的。非常感谢，工作就像一个魅力。