Скрипт обработки ссылок, ведущих на файлы документов (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» — слой который в себе содержит необходимые тэги для отображения документа, названия документа, ссылки Скачать и Закрыть и этот слой мы скрываем при закрытии и отображаем при нажатии на ссылку.