Как сделать загрузку iframe по клику на элемент?

Question

[Senseich]

Всем привет! Такой вопрос возник, возможно ли сделать, чтобы iframe грузился после нажатия на элемент(спойлер).

Есть страничка на которой располагаются к примеру 5 спойлеров, внутри которых фреймы с сериями кино.
Страничка при загрузке подлагивает, а что если будет 15 таких спойлеров.

Можно ли сделать чтобы фрейм подгружался именно при нажатии на спойлер, когда он раскрывается.

Вот здесь я тестовую страничку сделал для примера: https://mixmovie.ru/test/12571-ngengeng.html

Answer 1

[Ihor Bratukh]

Answer 2

[Никита Егоров]

У вас есть общий контейнер, который содержит все ваши кнопки - post_content m20
У меня же в пример это - container

При нажатии на container, проверяется, была ли нажата кнопка (можно ведь кликнуть по контейнеру между кнопок).
После нажатия, через свойство nextElementSibling берется iframe, читается его data-src и записывается в переменную link. Дальше создаем атрибут srс и в качестве значения помещаем туда этот link.
И после не забываем удалить data-srс, так как он больше не нужен.

Вот пример:


То есть вам только остается вставить код ниже, и к src в iframe добавить data-, то есть - data-src.

<!--Было так: --> <iframe src="src"></iframe>
<!--Стало так: --> <iframe data-src="src"></iframe>

document.querySelector('.post_content.m20').onclick = event => {
    const element = event.target.closest('.title_spoiler');
	
    if (element) {
        const frame = element.nextElementSibling;
        const link  = frame.dataset.src;
        
        frame.setAttribute('src', link);
        frame.removeAttribute('data-src');
    }
}

Comments

[Senseich]

Никита Егоров, Спасибо, я только немного не понял, это будет добавляться при каждом клике, просто у меня же там спойлеры, т.е нажали он открылся и фрейм загрузился, а если нажмут второй раз чтобы пока закрыть, то там будет undefined в src , ну т.е. нельзя сделать чтобы для каждого спойлера это срабатывало 1 раз , а при повторных нажатиях нет? )

[Никита Егоров]

Senseich, ах да, спойлеры же. Можно сделать так:

document.querySelector('.post_content.m20').onclick = event => {
    const element = event.target.closest('.title_spoiler');
    
    if (element) element.classList.toggle('active');
    if (element && element.classList.contains('acitve')) {
        const frame = element.nextElementSibling;
        const link  = frame.dataset.src;
        
        frame.setAttribute('src', link);
        frame.removeAttribute('data-src');
    }
}

[Senseich]

Никита Егоров, думаю то что нужно, большое спасибо!