Изменение iframe src с эффектом?

Question

Я создаю простую веб-приложение, и я хочу иметь ссылки на навигацию, которые вместо тега <a> изменяют SRC iframe. Когда это произойдет, есть ли способ быстро сделать старую страницу «скользящей вверх» и выйти из iframe, а затем загрузить новую страницу? Если возможно, я бы хотел использовать только HTML, Javascript и CSS.

Answer 1

Перед тем, как продолжить чтение, позвольте мне спросить вас: действительно ли вы нуждаетесь в IFrame? Загрузка веб-сайта на веб-сайт - это то, чего вы должны избегать, если нет альтернативы. Он медленный и обычно вызывает проблемы в браузерах.

Если вы используете это для навигации, возможно, вместо него можно будет использовать AJAX для загрузки нового контента? Или вы можете сначала загрузить все возможное содержимое и скрыть все из них, кроме одного.

Кстати, на случай, если у вас еще не много опыта (извиняюсь, если я под ложным впечатлением): Не бойтесь термина AJAX. Это просто функция Javascript, которая позволяет отправлять данные на сервер, а затем обрабатывать все, что он возвращает, после загрузки страницы. Он также известен как XML HTTP-запрос.

В любом случае структура Javascript, такая как jQuery (http://jquery.com) или прототип (http://prototypejs.org/), должна сделать вашу работу намного проще.

Если вы не видите альтернативы:

1) Ссылка, которая выполняет JS легко: <a href="#" onclick="return own_javascript_function();"> или <a href="javascript:my_function()">, например.

2) Пусть ваша функция создаст новый iframe с новым контентом (var newframe = new HTMLIFrameElement(), затем установите src и т. Д.) И вставьте его ниже предыдущего iframe. Дайте ему более низкий z-индекс, чтобы скрыть его ниже другого.

3) Слайд iframe out: используйте контейнер div с position:relative, в который вы помещаете iframe с position:absolute. Пусть javascript_function() использует таймер для изменения css-свойства iframe top от 0 до -500 (или любой другой высоты, которую имеет ваш iframe). Это особенно удобно для jQuery. Как только это закончится, удалите старый iframe и установите z-index нового iframe на что-то вроде 1 (чтобы избежать необходимости иметь более низкие и более низкие z-индексы).

Помните, что вы можете сделать то же самое с <div>, вместо которого вы загружаете новый контент с помощью ajax; до тех пор, пока вы не загружаетесь из внешних доменов.

Answer 2

На ум приходят два варианта.

Если вы не используете jQuery, я предлагаю вам изучить его.

1) Используйте маску. Когда пользователь нажимает на ссылку, маска будет затухать над содержимым страницы (позиция: absolute; top: 0; left: 0; width: 100%; height: $ windowHeight; color: # {mask-color}). После того, как произойдет постепенное затухание, перезагрузите iframe новым содержимым. Затем вытрите маску.

ПРИМЕЧАНИЕ: (заменяющие FadeIn/FADEOUT с slideUp/slideDown для эффекта скольжения, см JQuery эффекты: http://api.jquery.com/category/effects/)

Fadeout:

$('#elemendId').fadeOut(); 

FadeIn:

$('#elemendId').fadeOut(); 

По умолчанию время замирания это 500, я думаю, поэтому вам нужно будет установить тайм-аут для кода, который загружает страницу

setTimeout(function() { ... load new iframe ... }, 500) 

2) Поверните iFrame и выполните запрос AJAX для содержимого. что-то вроде

$.post('path/to/file.html', function(data) { 
$('#destination-div').html(data) 
}); 

Путь проще, и вы, вероятно, не столкнетесь с таким количеством вопросов.

EDIT: Я на самом деле не уверен, что если метод # 1 будет работать ... Я забыл, если вы можете положить маску поверх фрейма