ТаблицейБлоками.Приложение Д: учебник html, фрейм, JavaScript, SSI |
Последняя модификация: 10.08.2014 г
Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/frames.html
В принципе, я не буду рассказывать, как готовить фреймы. Об этом рассказано в документации по HTML 4.0, ссылки которую есть на странице Советы начинающим веб-мастерам. Эту документацию следует изучить самостоятельно. А я расскажу о преимуществах фреймов и предъявлю доказательства того, что все легенды об их недостатках порождены отсутствием таланта у некоторых программистов.
Что вы так встрепенулись? Я не утверждаю что, вы плохой программист, если не умеете сделать из фреймов конфетку. Я хочу лишь сказать что, есть НЕ программисты, плохие программисты, хорошие программисты и талантливые программисты. И если вы без моей помощи не можете разобраться с фреймами, значит, к талантливым вы не относитесь. Кто-то скажет что, на самом деле ему не хватает опыта, что он только начал и еще многого не понял…
А я когда начал? В эпоху динозавров? Однако, когда передо мной стоит задача, она передо мной уже не стоит.
Кто-то скажет, что он не знает английский, а вся документация на английском…
А вот и не вся. Посмотри на моем сайте или купи в магазине. Конечно, как правило, документация либо просто коряво переведена, либо изначально коряво написана, касается только отдельных аспектов или вообще, непонятно зачем создана... Но разве это можно сказать о той документации, которую переводил я? Или о той, которую я сам составлял? Если я еще оставил что-то не исследованным, то только потому, что еще не дошли руки, но акция по ликвидации безграмотности продолжается, и, вполне возможно, ответ на свой вопрос, ты получишь уже завтра.
И учти, это не ты не знаешь английский - это я его не знаю. Из принципа: пора им изучать русский. Однако на качество моих переводов это не влияет.
Но хватит полемики. Талант, о котором я говорил, он либо есть, либо его нет. Ему не поможет ни опыт, ни везение, ни что-то еще. Если у тебя нет таланта, то это не значит, что из тебя не выйдет хорошего программиста. Лучший не выйдет, это верно, но, сколько их, лучших? Пять, десять? А остальные просто хорошие, так что, все в порядке. Главное не то, будешь ли ты лучшим или просто хорошим, а тем более не то, есть ли у тебя талант, или нет. Я знаю талантливых людей, которые хиреют в нищете, а история знала их еще больше. Ты ведь не хочешь жить так? Тебе главное что? Дача на Канарах, личная яхта, лимузин, положительные отзывы в средствах массовой информации… Правильно? Талант для этого не нужен, так что, будь спокоен. И пойми, имел бы ты талант, именно прелести жизни, тебя бы и не волновали. И жена бы от тебя ушла, обвинив в том, что ты постоянно чем-то занят (или муж выгнал за постоянный беспорядок в доме). Так что, это даже хорошо, что талантов мало, иначе люди были бы одиноки. Плохо лишь то, что многим из них так и не удается вырваться из рутины бытия и заняться настоящим делом.
А мы, вот, займемся.
Если меню вписывать в каждую страницу, то это лишний текст, лишний объем, лишнее время загрузки и переделка всего сайта, при необходимости включить новый пункт. Если меню включается по SSI, то переделывать весь сайт для добавления меню не требуется, сокращается объем страниц... Но не время загрузки! Так как, сервер выдает обозревателю (агенту пользователя, как его любят называть разработчики спецификаций по HTML), файл с приклеенным к нему меню и, соответственно, с увеличенным объемом. К тому же, это дополнительная загрузка сервера, которому приходится, помимо всего прочего, редактировать выдаваемый файл. Если речь об одном посетителе (вообще на сервере) – разговора нет, но если десяток тысяч, да всем требуется приклеивать меню, то замедление работы сервера должно быть ощутимым. А в случае с фреймами, меню один раз загрузилось, а дальше выдаются только маленькие файлы текста – минимум трафика, минимум загрузки процессора не сервере, максимум скорости.
Возражений нет?
Кроме того, посмотрите какие на самом деле мелкие страницы на большинстве сайтов. Один – два абзаца, и вся страница. Остальное – баннеры, таблицы для формирования приличного вида после CGI-приклеивания и небольшое меню. А почему? Отчасти, чтобы заставить вас пощелкать по ссылкам и заработать для сайта баннерные показы, а отчасти и для того, чтоб вы не теряли из вида меню, уезжающее вверх, вместе с листаемым текстом. Чем меньше текста, тем меньше уедет меню. Можно, конечно, заставить его опускаться, по мере перемещения текста, но это ведь дополнительные трудности да, к тому же, такое, скачущее, меню и надоесть может.
Попытаюсь перечислить все мнимые недостатки фреймов. Поскольку я сам смотрю на фреймы положительно, то не гарантирую что, перечислю весь перечень их «недостатков», но, надеюсь, что главные, перечислю все.
Надеюсь все.
Теперь избавимся от заблуждений, в том же порядке, в котором перечислили. Попав на страницу, не являющуюся главной, пользователь остается без навигации… А че его туда понесло?
Но, будем серьезны. Несмотря на то, что дизайнеры желают, чтобы навигация начиналась с главной страницы, пользователь может запомнить адрес заинтересовавшего его раздела и в следующий раз полезть к нему, введя адрес в командную строку – вполне разумное поведение. Кроме того, на другом сайте, может быть ссылка на внутренний раздел вашего сайта, бросающая ничего не подозревающего пользователя прямо в самые дебри. Это тоже разумно. Представьте себе, что на странице, пятого уровня вложенности, у вас бесплатная раздача слонов. Прознав про это, я пишу на своей странице: «Желающие обзавестись слонами, могут бесплатно заполучить их по адресу…» и дальше адрес той самой страницы, пятого уровня вложенности. Не бросать же мне его на ваш титульный лист, как на амбразуру дзота, чтобы, помыкавшись, туда-сюда и ничего не найдя, он думал, что я его обманул. А так, я его прямехонько, к самым слонам. Если же из всей навигации у него будет только кнопка «Назад» в браузере, возвращающая на мой сайт, то это не мои – это ваши проблемы. Правильно? Вот вы и боитесь фреймов.
Не бойтесь, они не кусаются.
Для того чтобы пользователь, попадая на страницу, рассчитанную на отображение во фрейме, не лишался права передвижения, вверху страницы можно вставить такой код:
<SCRIPT LANGUAGE="JavaScript"><!-- if (self.parent.frames.length == 0) document.writeln("<H2>Здесь вы получите <A HREF=\"index.html\"> <font color=blue>удобную навигацию</font></A></h2>"); // --> </SCRIPT>
Где зеленый текст должен остаться без изменений, красный должен указывать на вашу главную страницу, остальное – на ваше усмотрение. Но текст должен быть броским. Условие if (self.parent.frames.length == 0), в данном примере, проверяет, открыт ли документ внутри фрейма, или нет, и если нет, добавляет в него указанный в document.writeln текст.
Тогда пользователь сможет сам перейти к главной странице.
Но это знают многие.
Не менее разумно в конце страницы вставить такой код:
<P> <HR> <Center><a href="http://webdesign.site3k.ru" target=_top title="Если вы оказались здесь не по ссылке сайта http://webdesign.site3k.ru">На главную страницу сайта </a></Center> <P>
Однако некоторые не хотят полагаться на пользователя. Он может полениться перейти на главную страницу и, никогда не узнает, как много потерял. Поэтому, вместо предложения перейти на главную страницу с навигацией, бросают его туда автоматически:
<SCRIPT LANGUAGE="JavaScript"> <!-- if (self.parent.frames.length == 0) self.parent.location="index.html"; // --> </SCRIPT>
Но это жестоко. Пользователь так никогда и не узнает, где его слоны.
А слабо вам открыть главную страницу, не отбирая у пользователя его слонов? (я заметил, что вместо слова «посетитель», часто использую «пользователь», вы уж меня простите, в Интернете я с конца августа 2003 года и еще не привык, основная же моя работа – следить за пользователями и писать для пользователей программы, а так же, обучать пользователей работе на компьютере).
Для того чтобы посетитель, оставаясь на выбранной им странице, работал по сценарию, открытая вне фреймов страница должна отсылать его на страницу фреймов, а та, должна определять какую страницу хотел посетитель и автоматически ее предъявлять.
Решить эту задачу можно многими способами. Меня интересовал тот, который обходится без серверной поддержки и полностью работоспособен на машинах, отключенных от Интернет (если файлы закачаны и просматриваются локально). Естественно, этот способ должен работать в любом браузере, поддерживающем скрипты и, ВизуалБейсик, по этой причине, отпадает. Остается только ЯваСкрипт. И, если вышеприведенный код переброски слегка откорректировать, добавив к имени главного файла знак вопроса и относительный путь перебрасывающего файла, вместе с именем (в примере, файл лежит в том же каталоге, и относительного пути нет), открываемая главная страница будет знать, что пользователь хотел получить.
<SCRIPT LANGUAGE="JavaScript"> <!-- if (self.parent.frames.length == 0) self.parent.location="redir.html?slony.html"; // --> </SCRIPT>
Для того чтобы обработать полученную информацию и выдать необходимый результат, страница фреймов должна иметь примерно следующий вид:
<html lang="ru"> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write('<frameset frameborder=1 bordercolor=maroon cols="25%,1*">'); document.write('<frame name=Frame1 src=LeftFram.html>'); B=document.location.search if (B == "") document.write('<frame name=Frame2 src=RightFrm.html>'); else document.write('<frame name=Frame2 src=' + B.substring(1) + '>'); document.write('</frameset>'); // --> </SCRIPT> </html>
Красное – это имена рамок, открываемых по умолчанию. Если посетитель пришел прямо на главную страницу, все остается, как было, с той только разницей, что страница пишется динамически. Если же его перебросило ссылкой типа redir.html?slony.html, функция document.location.search вычленит из нее имя перебросившего файла и знак вопроса и поместит это в переменную B. Дальше идет проверка условия. Если переменная пустая (переход произошел без переброски), открывается правая рамка, если переменная не пустая из нее берется остаток строки, после первого символа (функция B.substring(1)) и подставляется вместо имени правого фрейма. В результате, там открывается документ, совершивший переброску.
Первого недостатка больше нет?
В компонентах фрейма, добавлять ?LeftFram.html к index.html не требуется. Код переброски основных страниц фрейма должен выглядеть стандартно:
<SCRIPT LANGUAGE="JavaScript"> <!-- if (self.parent.frames.length == 0) self.parent.location="index.html"; // --> </SCRIPT>
Его незачем усложнять.
Во-первых, информация о плохой индексации давно устарела. Как я уже не раз заявлял, это было тогда, когда фреймы только появились. Но неужели вы думаете, что разработкой поисковых роботов занимается армейский генералитет? Некоторые программисты, смею заметить, не такие дубовые. Вот, например, что по этому поводу сообщил Рамблер: «Роботы Rambler прекрасно справляются с конструкциями фреймов, однако наличие лишнего этажа ссылок (от головного навигационного фрейма к "содержательным") замедляет индексацию». Насколько? Ровно настолько, насколько требуется для перехода от одного уровня, к другому. А это зависит от величины уровня. Учитывая что, первый уровень, в этом случае состоит из одного файла, для перехода достаточно минуты. Но можно исключить и ее. Желательно исключить. Ведь какой-то поисковик, действительно может быть дубовым (тяжело представить, но, чем черт не шутит?).
Для исключения проволочек с индексацией, после определения фреймов, перед тегом </frameset>, следует записать:
<noframes> <body>
И в это тело включить ссылки на все страницы второго уровня вложенности (те, на которые указывает рамка оглавления). Робот прочтет их и, проиндексирует одновременно с рамками фрейма (подробности смотрите в документации по HTML 4.0 и других материалах сайта).
Во-вторых, кто запретит поместить туда ссылки на файлы третьего, четвертого… тысячного уровня? И это будет самый быстроиндексируемый сайт.
И что же по вашему лучше индексируется, после всего сказанного?
Это тяжелый случай. Но «у нас с собой было…». В те же <noframes> и <body> помещаем следующий код:
<P>This page uses frames, but your browser doesn't support them. <P>Заведите себе нормальный браузер, который может смотреть фреймы.
Чтобы посетитель понял – он сам себя обкрадывает. А возможность все-таки увидеть содержимое сайта, дадут ему ссылки, оставленные для роботов. По уже упомянутым ссылкам перехода на главную страницу, он, если потребуется, вернется к оглавлению. Кто не верит, может проверить. Сомневаюсь, что хотя бы 10% посетителей Интернет имели браузеры не работающие с фреймами. Но, для того, чтобы вы могли проверить, подскажу: Windows (Total) Commander 5.5 имеет встроенный текстовой браузер. Отметьте в нем главную страницу фрейма с гиперссылками внутри «нофреймов», нажмите F3 и спокойно погуляйте по страницам. Работает?
Еще вопросы есть?
То, что на страницу внутри фрейма нельзя поставить закладку – это самая большая нелепость о которой мне приходилось слышать. Каким-то образом человек попадает на страницу? Я подозреваю, что он попадает туда по ссылке. Когда мышь оказывается на ссылке, в строке состояния отображается адрес ссылки и посетитель знает, куда отправится. Если же щелкнуть по ссылке правой кнопкой, то из появляющегося контекстного меню можно выбрать пункт «Скопировать адрес ссылки» и затем вставить его, куда угодно. Можно помочь посетителю, указав в самой странице ее адрес (например, командой «document.writeln("<P>Адрес: " +document.location)») или вписав функцию добавления страницы в закладки. Но, по большому счету, такая помощь нужна только посетителям, страдающим слабоумием.
<SCRIPT LANGUAGE="JavaScript"> <!-- if (self.parent.frames.length != 0) self.parent.location=document.location; // --> </SCRIPT>
if (self.parent.frames.length != 0) self.parent.location=document.location;
if (self.parent.location !='file://localhost/C:/1111/index.html' && self.parent.location !='file://localhost/C:/1111/test.html?ibmpc.html') self.parent.location="test.html?ibmpc.html";
if (window.location.host !="" && window.location.host !="localhost")
<SCRIPT LANGUAGE="JavaScript" src="readres.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> if (self.parent.frames.length == 0) refunction("MyFile.html"); </SCRIPT>
function refunction(path) {self.parent.location="redir?" + path }
<SCRIPT LANGUAGE="JavaScript" src="readres.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> if (window.location.host !="" && window.location.host !="localhost") if (self.parent.frames.length == 0) refunction("MyFile.html"); </SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="readres.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> if (window.location.host !="" && window.location.host !="localhost" && self.parent.frames.length == 0) refunction("MyFile.html"); </SCRIPT>
<html lang="ru"> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- function JS() { B=document.location.search if (B != "") parent.Frame3.location=B.substring(1) ; }// --> </SCRIPT> </head> <frameset frameborder=1 bordercolor=maroon cols="25%,1*" OnLoad = JS() > <frame name=Frame2 src=LeftTram.html> <frame name=Frame3 src=RightFrm.html> <noframes> <body> <p>This page uses frames, but your browser doesn't support them. <P> Заведите себе нормальный браузер, который может смотреть фреймы. </body> </noframes> </frameset> </html>
<SCRIPT LANGUAGE="JavaScript"><!-- try { a=self.parent.location; // при открытии во фрейме другого сайта, // эта срока может не сработать и // (дальнейшее выполнение скрипта прервалось бы, // если бы не оператор try), // а если сработало, переменная содержит адрес текущей страницы фреймов b=self.parent.frames.length;// вложенность фреймов. Если 0 - открывают напрямую } catch (e) { a=''; // если все-таки не работает b=0; } if ((a.indexOf('http://<!--#echo var="HTTP_HOST" -->') < 0 && window.location.host !="" && window.location.host !="localhost") || (b==0 && window.location.host !="" && window.location.host !="localhost")) // если текущая страница фреймов не наша (не содержит наше доменное имя), // и это не локальный просмотр, или фреймов вообще нет, и это не локальный просмотр self.parent.location= 'http://<!--#echo var="HTTP_HOST" -->/index.html?<!--#echo var="DOCUMENT_URI"-->'; // --> </SCRIPT>
<!-- если реферер не начинается с нашего домена --> <!--#if expr="$HTTP_REFERER != /^http:\/\/${HTTP_HOST}/" --> <!-- Включить фреймы --> <!--#include virtual="/index.html?${DOCUMENT_URI}" --> <!--#else --> <!-- Содержимое файла --> <!--#endif --> <!-- index.html --> <frameset frameborder=1 bordercolor=Teal cols="25%,1*"> <frame name=Frame2 src=/menu.html> <frame name=Frame3 src=<!--#if expr="$QUERY_STRING" --><!--#echo var="QUERY_STRING" --> <!--#else -->/default.html<!--#endif -->> </frameset>
<!--#include virtual="/index.html?${DOCUMENT_URI}" -->Можно сделать так, чтобы каждая страница была сама себе фреймом, для чего вместо
<!--#include virtual="/index.html?${DOCUMENT_URI}" -->Прописать:
<frameset frameborder=1 bordercolor=Teal cols="25%,1*"> <frame name=Frame2 src=/menu.html> <frame name=Frame3 src=<!--#echo var="DOCUMENT_URI" -->> </frameset>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title> <META name="keywords" content=""> <META name="description" content=""> </head> <!--#if expr="$HTTP_REFERER != /^http:\/\/${HTTP_HOST}/" --> <frameset frameborder=1 bordercolor=Teal cols="25%,1*"> <frame name=Frame2 src=/menu.html> <frame name=Frame3 src= <!--#echo var="DOCUMENT_URI" -->?a=<!--#config timefmt="%s" --><!--#echo var="LAST_MODIFIED" -->> <noframes> <!--#endif --> <!-- Содержимое файла --> <body> <h1>Пример способов борьбы с фреймами и способов их защиты</h1> <P>Способ, если страница вызвана без фрейма, автоматически вставить ее во фрейм, без использования клиентских скриптов. <P>Здесь используется SSI. <P>Значение HTTP_REFERER=<!--#echo var="HTTP_REFERER" --> </body> <!--#if expr="$HTTP_REFERER != /^http:\/\/${HTTP_HOST}/" --> </noframes> </frameset> <!--#endif --> <html>
Генерация случайного параметра в
<frame name=Frame3 src=<!--#echo var="DOCUMENT_URI" -->?a=<!--#config timefmt="%s" --><!--#echo var="LAST_MODIFIED" -->>
Нужна для того, чтобы браузер не пытался взять страницу из кэша, так как там она является носителем фрейма, а теперь наступило время использовать другой ее вариант.
Наверняка вам будет интересно посмотреть исходный код и адреса страниц описывающих фреймы и страниц, отображающих текст. Обратите внимание: адрес у них один.
Можно сделать так, чтобы в варианте с SSI, содержащим и текст страницы, и описание фреймов, <noframes> загружались только поисковыми роботами, но это уже область клоачных скриптов.
# Включить преобразование адресов RewriteEngine on # Если запрошен не корень сайта (возможно с названием корневого индекса и заключительным слешем) # и не корень с обязательным вопросительным знаком и QUERY_STRING # и запрос поступил не с сайта webdesign.site3k.ru RewriteCond %{REQUEST_URI} !^/(index\.html)?/?$ [NC] RewriteCond %{REQUEST_URI} !^/(index\.html)?/?\?.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(www\.)?webdesign\.site3k\.net.*$ [NC] RewriteRule ^.*$ /?%{REQUEST_URI} [NS,R]
http://webdesign.site3k.ru/docs/robots_txt.html
http://webdesign.site3k.ru/?/docs/robots_txt.html