Изменить SRC из нескольких элементов с тем же классом - PullRequest
Новая
       15

Изменить SRC из нескольких элементов с тем же классом

0 голосов
/ 30 августа 2018

У меня есть несколько 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>

Возможное решение

Хорошо, у меня слабое решение для моей проблемы. Я добавляю класс active в контейнер iframe, когда лайтбокс открыт. Затем, когда лайтбокс закрывается, скрипт использует селектор «.active iframe». 

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

Я знаю, это слабое решение, но если у вас есть лучший способ решить проблему, вы можете ответить на вопрос.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Ваш код не может различить фреймы, поэтому оба фрейма обновляются. Попробуйте позвонить им с уникальными идентификаторами или перебрать доступные кадры. 

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>
0 голосов
/ 30 августа 2018

Хорошо, я получил слабое решение для моей проблемы. Я добавляю класс .active в контейнер iframe, когда лайтбокс открыт. Затем, когда лайтбокс закрывается, скрипт использует селектор «.active iframe». 

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

Я знаю, это слабое решение, но если у вас есть лучший способ решить проблему, вы можете ответить на вопрос.

...