Различные фишки для iframe

Всем привет!
Сегодня я покажу, что можно сделать с «iframe».
Может вам эти фишки понравятся, и вы захотите их применить для сайта.
Конечно, здесь без JavaScript не обошлось.

Для тех, кто не знает, что такое «iframe» будет полезно перейти на вот эту страницу.

Ну что, приступим.

Вот так выглядит стандартный плавающий фрейм на HTML

<iframe src="http://stepkinblog.ru/"></iframe>

Трюк № 1

При нажатии на ссылку «Далее →» во фреймовом окне заменится сайт.

<script ENGINE="text/javascript">
function ChangeLnk (a){document.getElementById('preview-frame').src = a.href;}
</script>

<iframe id="preview-frame" src="/" name="preview-frame" frameborder="0" noresize="noresize"></iframe>
<a href="http://stepkinblog.ru/" onclick="ChangeLnk(this);return false">Далее →</a>

Трюк № 2

Автоматически во фреймовом окне заменится сайт.

<script>
function scr() {
document.getElementById("wind4").src='http://stepkinblog.ru';

}
setTimeout(scr, 5000);
</script>
<iframe id="wind4" name="wind4" src="/wordpress/poleznye-php-funkcii-dlya-wordpress.html/"></iframe>

Основные настройки скрипта.

setTimeout(scr, 5000); - 5000 (это 5 секунд).

Трюк № 3

Автоматически во фреймовом окне заменятся сайты по кругу.

<iframe width="300" height="300" id='frame'></iframe>
<script language="JavaScript">
var myArray = ["http://stepkinblog.ru","","http://nocrisise.ru"];
var n=0;

function sc() {
if (n>=myArray.length) n = 0;
document.getElementById("frame").src= myArray[n++];
setTimeout(sc, 5000);
}
sc();
</script>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

2 Ответов на комментарий - Различные фишки для iframe

1. nesnayka

   07.02.2017 в 01:22

   А можно и без JS.
   Вообще.
   На чистом HTML. ))

   Вот так:

     <iframe name="my-frame"></iframe>
     <form action="http://stepkinblog.ru" target="my-frame">
       <input ENGINE="submit" value="stepkinblog" />
     </form>
     <form action="" target="my-frame">
       <input type="submit" value="bloggood" />
     </form>
     <form action="http://nocrisise.ru" target="my-frame">
       <input type="submit" value="nocrisise" />
     </form>
   
   

   Здесь, правда, сделано отдельными тремя кнопками, но если здорово поизощряться, то, думаю, можно придумать, как сделать перелистывание по типу вперед-назад.
2. Степан => автор блога

   07.02.2017 в 09:39

   Класс! Спасибо за полезный комментарий!

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Вебмастеру, для сайта, эффекты для сайта