Примеры использования iframe-страниц


Что за зверь такой iframe  и как использовать открытие новых внешних вкладок во фрейме на страницах.Примеры использования iframe-вкладок,JavaScript и код вызова внешнего окна без закрытия родительской страницы.Простая установка видеороликов с youtube или других видео-хостингов в iframe.





Для чего нужны iframe страницы.


Для простых пользовательских блогов использование iframe -страниц не столь уж актуально.Так как написание текста или донесения другой полезной информации для многих это существенная проблема,то многие страницы просто содержат в себе минимум информации и несколько вставленных друг за другом видеороликов,загромождающих полезное пространство станицы и замедляющих её загрузку.Но со временем и приобретением опыта в создании веб-страниц излишняя нагромождённость и захламленность начинает напрягать.Помочь избавиться от этих неприятных моментов и придать юзабилити вашим страницам можно с помощью небольшого легко настраиваемого скрипта с iframe-вкладкой.





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

Установка кода для iframe.


Так как наша страница будет открываться в новой внешней вкладке,то использования JavaScript  нам не избежать.Сам код необходимо будет установить или в шаблон блога при многократных применениях данного эффекта или же просто можно скопировать и добавить в гаджет HTML и JavaScript.Хотя при однократном применении также можно будет добавить данный код непосредственно в тело сообщения,где нибудь в конце,чтобы не мешал и не путался под ногами.
 <script>  function showSpoiler(obj){var inner = obj.parentNode.getElementsByTagName("div")[0]; if (inner.style.display == "none") inner.style.display = ""; else inner.style.display = "none";}i = 0;
function press(f) {
if(i == 0) f.but.value = "Закрыть"
i++} </script>
Сам же код вызова окна и ссылки на фрейм-страницу будет заключён в контейнер с настройками CSS.Почему вместе с CSS сейчас объясню.На странице можно будет использовать несколько открывающихся фреймов и для каждого может потребоваться индивидуальные настройки в соответствии с дизайном.
 <div><span style="cursor: pointer" onclick="showSpoiler(this)"><form>
<input type=button name=but value="Открыть" onClick="press(this.form)">
</form><div style="border-bottom: 3px solid; background-color: #fff; position: absolute; text-align: center; border-left: 3px solid;color: #3a6; margin: -300px 0px 0px -300px;top: 50%; /* Отступ в процентах от верхнего края окна */
left: 50%; /* Отступ в процентах от левого края окна */
width:600px; /* Ширина блока */
height: 600px; /* Высота блока */
position: absolute; /* Абсолютное позиционирование блока */
margin-top: -300px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине высоты блока со знаком минус */
margin-left: -300px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */ display: none; border-top: 3px solid; top: 30%; border-right: 3px solid; left: 45%" id="poisk">
<noindex> <iframe src="http://Ссылка на страницу" width="600px" height="600px"
       align ="left" scrolling="auto" frameborder="0"></iframe></noindex> </div></div>

Устанавливать данный код вызова нужно будет в том месте,где по вашему наиболее уместен будет вывод дополнительной информации с внешних источников.Установка видеороликов с youtube аналогична первому варианту.Код фрейма видео нужно будет брать непосредственно на сайтах видеохостингов. Позиционирование относительно центра страницы нужно производить изменяя переменное значение margin-top: -300px; .Меняя это значение можно добиться наиболее эстетичного положения открытого окна на экране.

Отправить комментарий