Динамически установить SR c iframe для задержки загрузки

Question

У меня есть страница с несколькими ссылками и несколькими фреймами. Мне удалось заставить iframes нормально скрываться, а затем становиться видимым при нажатии на соответствующую ссылку.

Однако, поскольку существует довольно много iframes, я бы хотел, чтобы они загружались только тогда, когда они видны. В данный момент все они загружаются при первой загрузке страницы, что делает ее немного медленной.

Я пытаюсь заполнить src элемента iframe только после нажатия на его ссылку, но я не могу управлять им. Я либо не загружаю ни одну из них, или они все загружаются каждый раз, когда нажимается какая-либо ссылка.

<ul>
  <li> <a href="#index1" class="index-topic">Topic Name</a> </li>
  <li> <a href="#index2" class="index-topic">Topic Name</a> </li>
  <li> <a href="#index3" class="index-topic">Topic Name</a> </li>
</ul>

<section id="index1" class="index-content">
  <div>
    Some text about the topic
  </div>
  <div>
    <iframe class="data-embed" data-src="data-source-URL" src=""></iframe>
  </div>
</section>

$('.index-topic').click(function(e) {
  //Prevent scrolling of page on click
  event.preventDefault();

  //This is the section that isn't working:
  $(this).find('iframe').attr("src", function() {
    return $(this).data("src");
  });

  //Toggle target tab
  $($(this).attr('href')).addClass('active').siblings().removeClass('active');
});

Answer 1

Проблема заключается в том, что вы используете find() на this, что относится к a, по которому щелкнули, а iframe не является потомком этого элемента.

Чтобы исправить это, вы можете использовать href атрибут нажатого a в качестве селектора.

$('.index-topic').click(function(e) {
  e.preventDefault();

  let selector = $(this).attr('href');
  $(selector).find('iframe').prop("src", function() {
    return $(this).data("src");
  }).addClass('active').siblings().removeClass('active');
});

<ul>
  <li> <a href="#index1" class="index-topic">Topic Name</a> </li>
  <li> <a href="#index2" class="index-topic">Topic Name</a> </li>
  <li> <a href="#index3" class="index-topic">Topic Name</a> </li>
</ul>

<section id="index1" class="index-content">
  <div>
    Some text about the topic
  </div>
  <div>
    <iframe class="data-embed" data-src="data-source-URL" src=""></iframe>
  </div>
</section>