Не часто но все же приходиться создавать сайты с наложениям страниц, а именно вывода другой страницы в модальном окне, это достаточно практичный ход, ведь позволяет удержать посетителя на сайте, не перекидывая его на другую страничку. Вывести так страницы могут и простые фреймы, но они достаточно просто выглядят. Но если вам необходимо скрасить данные окна. Тогда вам придет на помощь небольшой плагин jquery, который благодаря своей гибкости, позволит реализовать ваши пожелания в данном направлении.
Для данной функции существуют множество различных плагинов, но мы отдали предпочтения именно этому. Данный плагин обладает рядом преимуществ, а именно:
- Маленький размер - создан специально для отображения страниц, а не картинок;
- Не имеет интерфейса, по этому страница будет отображаться в обычном окне;
- Страница имеет возможность закрытия и отправки сообщения с модального окна;
- Может использовать кэш для ускорения загрузки страницы;
Основная идея состоит в том, что при нажатии на ссылокнку или кнопки, плагин, FrameWarp, определит координаты этого элемента и вызывает анимацию CSS всплывающего прямоугольника в центре страницы. Плагин будет загружаться при помощи JS Iframe и ссылаться на урлу, который мы указали.
Возможности плагина
Теперь необходимо написать сам плагин. нам необходимо добавить наш код в скрытую функцию так, чтобы он был недоступен для остальной части страницы. В действительности все переменные и вспомогательные функции доступны только для этого плагина.
framewarp.js
(function($){
// Основные переменные
var body = $('body'),
win = $(window),
popup, popupBG;
var frameCache = {};
var frameCacheDiv = $('<div class="frameCacheDiv">').appendTo('body');
var currentIframe;
$.fn.frameWarp = function(settings){
// Основной код плагина
};
// Вспомогательные функции
function hide(){
// Удаляем темный фон из страницы
}
function setUpAPI(iframe, settings){
// Сделаем два API метода доступными для фрейма,
// если эта страница от того же домена.
}
function sameOrigin(url){
// Нужно определить домен
}
function getOrigin(url){
}
})(jQuery);
Данный плагин создает div с классом frameCacheDiv, для добавления js iframe, который мы добавим к странице. Еще два div будут добавлены к странице с помощью плагина – .popup и .popupBG, которые мы рассмотрим немного позже. Теперь давайте рассмотрим вспомогательные функции.
function hide(){
if(currentIframe){
currentIframe.hide();
currentIframe = null;
}
popupBG.remove();
popup.remove();
}
function setUpAPI(iframe, settings){
if(sameOrigin(settings.url)){
// минимум API в iFrame
iframe[0].contentWindow.frameWarp = {
hide: hide,
sendMessage:function(param){
return settings.onMessage(param);
}
};
}
}
function sameOrigin(url){
// Определяем url,
// Ссылаемся к сайту или к удаленному серверу
return (getOrigin(url) == getOrigin(location.href));
}
function getOrigin(url){
// Используем элемент привязки
// для разбора URL
var a = document.createElement('a');
a.href = url;
return a.protocol+'//'+a.hostname;
}
Но следует заметить, что во всех современных браузерах реализована защиты которая называется: “same origin policy”, которая устанавливает ограничение веб-сайту для получения доступу к функции DOM другого сайта. По этой причине, у нас есть вспомогательная функция, которая сравнивает адрес js iFrame с адресом текущей страницы. Только когда и домен и соответствие протокола определенны, мы получим доступ к DOM iframe и добавим API методы для отправки сообщений и скрывался. На конечном этапе плагин frameWarp будет выглядеть так.
$.fn.frameWarp = function(settings){
// Настройки по умолчанию
settings = $.extend({
cache: true,
url: '',
width:600,
height:500,
closeOnBackgroundClick: true,
onMessage:function(){},
onShow:function(){}
}, settings);
this.on('click',function(e){
e.preventDefault();
var elem = $(this),
offset = elem.offset();
// Центральная кнопка
var buttonCenter = {
x: offset.left - win.scrollLeft() + elem.outerWidth()/2,
y: offset.top - win.scrollTop() + elem.outerHeight()/2
};
// Центр окна
var windowCenter = {
x: win.width()/2,
y: win.height()/2
};
// Если нет URL, используйте атрибут href.
if(!settings.url && elem.attr('href')){
settings.url = elem.attr('href');
}
// Темный фон
popupBG = $('<div>',{'class':'popupBG'}).appendTo(body);
popupBG.click(function(){
if(settings.closeOnBackgroundClick){
hide();
}
}).animate({
'opacity':1
},400);
// Всплывающее окно
popup = $('<div>').addClass('popup').css({
width : 0,
height : 0,
top : buttonCenter.y,
left : buttonCenter.x - 35
});
// Добавление в страницу CSS3 анимации
popup.appendTo(body).animate({
'width' : settings.width,
'top' : windowCenter.y - settings.height/2,
'left' : windowCenter.x - settings.width/2,
'border-top-width' : settings.height,
'border-right-width' : 0,
'border-left-width' : 0
},200,function(){
popup.addClass('loading').css({
'width': settings.width,
'height': settings.height
});
var iframe;
// Если этот IFRAME уже существует в кэше
if(settings.cache && settings.url in frameCache){
iframe = frameCache[settings.url].show();
}
else{
iframe = $('<iframe>',{
'src' : settings.url,
'css' : {
'width' : settings.width,
'height' : settings.height,
}
});
// Если кэш включен, добавить к нему фрейм
if(settings.cache){
frameCache[settings.url] = iframe;
iframe.data('cached',true);
settings.onShow();
}
else{
// Удаление некэшируемых фреймов
frameCacheDiv.find('iframe').each(function(){
var f = $(this);
if(!f.data('cached')){
f.remove();
}
});
}
iframe.ready(function(){
frameCacheDiv.append(iframe);
setUpAPI(iframe, settings);
settings.onShow();
});
}
currentIframe = iframe;
});
});
return this;
};
Как уже заметили ранее, для начала мы используем jQuery, чтобы улучшить функцию jQuery animate(), которая поддерживает CSS анимацию.
Использование плагина
После того как вы подключили, страница должна его инициализировать, к примеру мы используем данный код в демонстрации.
$(function(){
// Если никакое свойство URL не будет передано,
// то будет использоваться атрибут href
$('#b1').frameWarp();
$('#b2').frameWarp({
onMessage: function(msg){
$('#messages').append('Message Received: '+ msg+'
');
}
});
// Кэш включен по умолчанию
$('#b3').frameWarp({
url : 'http://www.s-sd.ru/'
});
// Отключение кэширования
$('#b4').frameWarp({
url : 'http://www.s-sd.ru/',
cache:false
});
});
Вот и все. Готово!
Материал взят из зарубежного источника - http://tutorialzine.com/2012/07/framewarp-jquery-plugin/ и представлен исключительно в ознакомительных целях.
