BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Различные фишки для iframe

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

2016-12-31 / Вр:12:10 / просмотров: 657

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

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

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

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

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

Трюк № 1

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

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

<iframe id="preview-frame" src="http://bloggood.ru/" 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="http://bloggood.ru/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://bloggood.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

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

    Вот так:

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 743
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4048