Question

我有多个iframe，每个iframe都有自己的src属性；

<iframe src="test1.html"></iframe>
<iframe src="test2.html"></iframe>

具体来说就是灯箱；在iframe中，我具有指向其他页面的链接。当您关闭灯箱并重新打开灯箱时，iframe会将您访问的最后一页保留在该iframe中（而不是原始的src）；

然后我使用该代码将iframe返回到其原始的src

$(".lightboxOverlay").click(function(e) {
  //bla bla bla
  $("#lightboxID iframe").attr("src", $("#lightboxID iframe").attr("src"));
});

它仅在使用一个iframe时有效，但是如果您有多个灯箱，每个灯箱都具有不同的iframe并使用上面的代码，则所有iframe都具有相同的src;

如前所述，关闭灯箱时，我需要将iframe恢复为原始的src。

你能帮我吗？

真正的代码是这样的：

<div class="lightbox" id="lb1">
    <iframe src="page1.html"></iframe>
</div> 
<div class="lightbox" id="lb2">
    <iframe src="page2.html"></iframe>
</div>

可能的解决方案

好吧，我的问题没有很强的解决方案。当灯箱打开时，我向iframe容器中添加了active类。然后，当灯箱关闭时，脚本将使用“ .active iframe”选择器。

$(".lightboxOverlay").click(function(e) {
  //bla bla bla
  $(".active iframe").attr("src", $(".active iframe").attr("src"));
  $(".active").removeClass("active");
});

我知道，这是一个较差的解决方案，但是如果您有更好的方法来解决问题，则可以自由回答问题。

Answer 1

好吧，我的问题没有很强的解决方案。当灯箱打开时，我向iframe容器添加了“ .active”类。然后，当灯箱关闭时，脚本将使用“ .active iframe”选择器。

$(".lightboxOverlay").click(function(e) {
  //bla bla bla
  $(".active iframe").attr("src", $(".active iframe").attr("src"));
  $(".active").removeClass("active");
});

我知道，这是一个较差的解决方案，但是如果您有更好的方法来解决问题，则可以自由回答。

Answer 2

您的代码无法区分框架，这就是为什么两个框架都被更新的原因。尝试使用唯一的ID调用它们，或在可用的框架中循环浏览。

var iframes = [...document.getElementsByTagName('iframe')];

$(".lightboxOverlay").click(function(e) {
iframes.forEach(function(element) {
  console.log(element);
  /* Your code here and use `element` instead of `$('iframe')` and this will loop through the available frames */
});
});

<iframe src="test1.html"></iframe>
<iframe src="test2.html"></iframe>

更改具有相同类的多个元素的src

2 个答案: