Скрипт обработки ссылок, ведущих на файлы документов (MS Office и др.)
Скрипт позволяет открывать такие файлы прямо на странице сайта.
Для работы скрипта необходима библиотека jQuery и возможности docs.google.com
Указываем код для обработки ссылок содержащих текст:
$(document).ready(function() {
$("a[href$=doc]").addClass("doc").addClass("googfile").attr({ target: "_blank" });
$("a[href$=docx]").addClass("docx").addClass("googfile").attr({ target: "_blank" });
});
здесь обрабатываются ссылки содержащие в атрибуте href символы doc или docx, если такие имеются то к ним добавляются, класс doc (в дальнейшем можно стилизовать с помощью css и добавить изображение), класс googfile (для дальнейшей обработки данных ссылки) и цель открытия — новое окно (хотя здесь можно и не писать)
Дальше опишем нажатие на такие ссылки
$(".googfile").click(function(){
var h = $(window).height();
var url='https://alneo.ru'+$(this).attr("href");
var name=$(this).html();
$(".googfile_doc").html('<iframe src="http://docs.google.com/viewer?url='+url+'&embedded=true" width="100%" height="'+h+'" style="border: none;"></iframe>');
$(".googfile_name").html(name);
$(".googfile_dwnl").attr("href",url);
$(".googfile_view").show();
return false;
});
h — высота видимой части браузер пользователя (необходимо чтобы фрейм знал высоту на которую должен раскрываться)
url — адрес файла ссылки (тут может и не потребоваться добавка домена сайта
'https://alneo.ru'+
, если в ссылке уже есть домен)
name — название ссылки (для красоты)
$(".googfile_doc").html('<iframe src="http://docs.google.com/viewer?url='+url+'&embedded=true" width="100%" height="'+h+'" style="border: none;"></iframe>');
здесь мы ищем тэг с классом google_doc и создаем ему html
<iframe src=»http://docs.google.com/viewer?url=’+url+’&embedded=true» width=»100%» height=»‘+h+'» style=»border: none;»></iframe>
который уже отображает наш документ в читаемом виде
$(".googfile_name").html(name);
$(".googfile_dwnl").attr("href",url);
$(".googfile_view").show();
отображаем название файла
для ссылки скачать подставляем url
отображаем тэг с классом googfile_view
Описание HTML разметки
<div class="googfile_view" style="left: 0px;position: absolute;top: 50px;display:none;width:100%;height:100%;z-index:9999;">
<div class="googfile_panel" style="background: #1D32A0;padding: 5px;font-size: 14px;color: #fff;text-align: right;">
<span class="googfile_name"></span><br>
<a href="#" class="googfile_dwnl"style="color: #fff;">Скачать</a> |
<a href="#" class="googfile_close" style="color: #fff;">Закрыть</a>
</div>
<div class="googfile_doc"></div>
</div>
здесь тэг <div class=»googfile_view» — слой который в себе содержит необходимые тэги для отображения документа, названия документа, ссылки Скачать и Закрыть и этот слой мы скрываем при закрытии и отображаем при нажатии на ссылку.
