Перезагрузить iframe без перезагрузки страницы

Подробно о перезагрузке iframe без перезагрузки страницы

1. Простой пример перезагрузить iframe без перезагрузки страницы
2. Еще пример перезагрузки iframe

Скопировать ссылку



Простой пример перезагрузить iframe без перезагрузки страницы

Для того, чтобы "перезагрузить iframe без перезагрузки страницы" нам понадобится два адреса. Два адреса - только для того, чтобы вы увидели, что iframe перезагрузился:

https://www.youtube.com/embed/c3tyN5ZTB7I
https://www.youtube.com/embed/lnn7JF3QARw


Скопировали iframe из youtube из вкладки поделиться + добавим внутрь тега свой id:

<iframe id="id_iframe" width="560" height="315" src="https://www.youtube.com/embed/c3tyN5ZTB7I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Далее... нам нужна кнопка button.

Туда поместим onclick

обратиться к тегу - одним из способов...

добавим туда src... соберем нашу кнопку:

<button onclick = 'id_iframe.src = "https://www.youtube.com/embed/lnn7JF3QARw"'>перезагрузить iframe</button>

Выведем и iframe и кнопку:

Результат перезагрузки iframe без перезагрузки страницы

Для того, чтобы перезагрузить iframe - нажмите по кнопке "перезагрузить iframe"

перезагрузить iframe
Скопировать ссылку



Еще пример перезагрузки iframe

Рассмотрим пример перезагрузки iframe ...

Сгенерируем страницу с помощью get

Куда поместим функцию time, которая будет менять свое значение через секунду! После того, как вы откроете страницу, перезагрузите её через секунду. Вы сможете увидеть, что содержание изменится, что собственно нам и нужно - изменение контента для iframe. Можно посмотреть на результат

<?
if($_GET['example'])
{
echo(time()); exit;
}
?>


Далее поместим в iframe нашу ссылку :

<iframe id="id_iframe2" src="https://dwweb.ru/perezagruzka_iframe.html?example=1"></iframe>

Аналогично, что мы сделали с кнопкой button - повторим издесь:

<button onclick = 'id_iframe2.src = "https://dwweb.ru/perezagruzka_iframe.html?example=1"'>перезагрузи iframe<</button>

Соберем код перезагрузки iframe в один код:

<iframe id="id_iframe2" src="https://dwweb.ru/perezagruzka_iframe.html?example=1"></iframe>
<button onclick = 'id_iframe2.src = "https://dwweb.ru/perezagruzka_iframe.html?example=1"'>перезагрузи iframe</button>


Результат перезагрузки iframe

В iframe вывелось текущее(на момент загрузки страницы) значение "метки времени".

Чтобы увидеть, что наш iframe перезагрузился - нажмите по кнопке "перезагрузи iframe"
перезагрузи iframe

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---