Последнее обновление:
Как открыть файл по протоколу http://, если он открыт в браузере локально, т.е. по протоколу file:/// ?
Статья может быть полезна тем, кто работает с html-страницами локально, т.е. на своем персональном компьютере.
Если найти в проводнике Windows какой-либо html-файл и кликнуть по нему два раза мышью, он откроется в браузере, являющимся браузером по умолчанию по протоколу file:///. Это - так называемый локальный протокол, точнее, даже псевдопротокол. При этом никакие серверные технологии (например, SSI, PHP, node.js и т.п.) доступны не будут. Не будет функционировать AJAX. Соответственно, страница сайта может отображаться не полностью, а то и некорректно. Как быть?
Необходимо открыть эту страницу в браузере по протоколу HTTP
Однако, для этого необходимо знать ее URL и, что самое главное, потребуется вписать этот URL в адресную строку браузера (или как вариант, можно перейти на эту страницу по ссылке откуда-нибудь, но там, опять-таки, должен присутствовать корркетный URL). Разумеется, потратив пару минут, вполне можно написать URL в адресной строке вручную и затем кликнуть мышью "Перейти". Но, это как-то долго и неудобно, хотелось бы ускорить процесс, чтобы страница сама открылась по протоколу http (вместо file) без особых затруднений. Одним из выходов является создание букмарклета.
Пишем букмарклет
Приведем сразу javascript-код букмарклета:
javascript:var%20status=checkServerStatus();function%20setServerStatus(status){alert(status);return%20status;}function%20checkServerStatus(){var%20img=document.createElement("img");img.onload=function(){change_URL_from_file_to_HTTP();};img.onerror=function(){setServerStatus("%D0%97%D0%B0%D0%BF%D1%80%D0%BE%D1%81%20%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%BD%20%D0%BD%D0%B0%20%D1%81%D0%B0%D0%B9%D1%82%20site.ru%20%D0%B2%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82%D0%B5,%20%D0%B0%20%D0%BD%D0%B5%20%D0%BD%D0%B0%20%D0%BB%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82.%20\n%D0%9F%D0%BE%D1%8D%D1%82%D0%BE%D0%BC%D1%83%20%D0%BF%D0%B5%D1%80%D0%B5%D0%B9%D1%82%D0%B8%20%D1%81%20%D0%BF%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB%D0%B0%20file:///%20%20%D0%BD%D0%B0%20%20%D0%BF%D1%80%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%BB%20http://%20%20%D0%BF%D0%BE%D0%BA%D0%B0%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%81%D1%8F.%20\n\n%20%D0%9F%D0%BE%D0%BF%D1%80%D0%BE%D0%B1%D1%83%D0%B9%D1%82%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D1%81%D1%82%D1%8C%D1%8E%20%D0%BE%D0%B1%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83%20(Ctrl%20+%20F5)");};img.src="http://site.ru/server_CONTROL.png";}function%20change_URL_from_file_to_HTTP(){var%20hr=window.location.href;if(window.location.protocol.replace(/[^a-zA-Z]/,"").toLowerCase()==='file'){hr=hr.replace(/file:\/\/\/[a-zA-Z]:\/(.*?)[a-zA-Z/-_]*?(\/[a-zA-Z-_]+?\.[a-zA-Z]*?)\/w{3}/,"http:/$2");if(hr!=window.location.href){window.location.href=hr;}}}
Этот букмарклет можно скопировать, создать закладку браузера и в ее (закладки) свойствах в поле для адреса вставить код букмарклета.
Не пугайтесь на некий "страшный" код: дело в том, что для удобства, букмарклет выдает русскоязычное сообщение и оно как раз и отображается символами вида %D1%80%D0%BE%D1%81.... Для облегчения понимания работы букмарклета дадим его "обычный" вид:
<script type="text/javascript">
var status = checkServerStatus();
function setServerStatus(status) {
alert(status);
return status;
}
function checkServerStatus(){
// setServerStatus("unknown");
var img = document.createElement("img");
img.onload = function(){ // Проверяем доступность сервера на загрузку картинки
// setServerStatus("online");
// Если находимся на локальном сайте, то пробуем изменить URL c file:/// на http://
change_URL_from_file_to_HTTP();
};
img.onerror = function(){ // Если сервер недоступен
setServerStatus("Запрос сделан на сайт site.ru в интернете, а не на локальный сайт. \nПоэтому перейти с протокола file:/// на протокол http:// пока не получится. \n\n Попробуйте полностью обновить страницу (Ctrl + F5)");
};
img.src = "http://site.ru/server_CONTROL.png";
}
function change_URL_from_file_to_HTTP() {
var hr = window.location.href;
if(window.location.protocol.replace(/[^a-zA-Z]/, "").toLowerCase() === 'file') {
// Заменяем запрос file:///C:/dir/site.ru/www/ на http://site.ru/
hr = hr.replace(/file:\/\/\/[a-zA-Z]:\/(.*?)[a-zA-Z/-_]*?(\/[a-zA-Z-_]+?\.[a-zA-Z]*?)\/w{3}/, "http:/$2");
// Если URL страницы совпадает с полученным адресом (hr), то ничего не делаем; если нет - переходим по адресу hr
if(hr != window.location.href){
window.location.href = hr;
}
}
}
</script>
Как все работает
При вызове букмарклета из закладки на соответствующую html-страницу подгружается указанный скрипт. Который вначале проверяет доступность локального сервера. Если речь идет о локальном компьютере (т.е. именно на нем была открыта вкладка, имеющая URL вида file:///C:/dir/site.ru/www/TEST/123.html и которую требуется открыть по протоколу http, т.е. в виде http://site.ru/TEST/123.html), то, соответственно, должен быть запущен локальный сервер. Автор статьи использовал старый добрый (и надежный, к тому же) Denwer, но вполне можно применить и что-то другое.
Доступность локального сервера проверяется путем попытки скачивания с него какой-нибудь картинки, в данном случае - имеющей URL http://site.ru/server_CONTROL.png. Чем меньше ее размер, тем лучше. Важно, чтобы такой картинки НЕ БЫЛО на сайте site.ru в интернете (по указанному URL), но чтобы она присутствовала на локальном сайте. Способ проверки доступности сервера при помощи картинки применялся еще, наверное, лет 20 назад и уже вполне зарекомендовал себя. Это - наиболее эффективный, простой и, главное, кроссбраузерный способ. То, что предлагают на ряде других сайтов - из серии: использовать AJAX, или JSONP-запрос, или специальные сервисы в интернете, является неоправданно сложным, да и неудобным для данного случая.
Кстати, отображать картинку на странице нет необходимости, да и мешаться она там будет. Для гарантии того, что запрос был именно на локальный сервер, вполне достаточно проверить событие onload.
Если картинка скачается (сработает событие onload), то есть ясная гарантия, что запрос был направлен именно на локальный сервер. А, значит, можно пытаться загрузить страницу по протоколу http:// вместо file:///. Это пытается делать функция change_URL_from_file_to_HTTP(). Эта функция при помощи регулярного выражения заменяет строку в запросе вида file:///C:/dir/site.ru/www/ на строку вида http://site.ru/, формируя соответствующий URL. Затем функция проверяет, не по этому ли URL уже открыта текущая html-страница: если нет, то загружает страницу по URL, содержащем протокол http. Дело в том, что если не сделать такой проверки, может возникнуть зацикливание: страница будет каждый раз пытаться открыться вновь по тому же самому URL вида http://site.ru/.
Если же локальный сервер (Denwer или т.п.) не будет запущен, картинка загрузиться не сможет и букмарклет выдаст соответствующее сообщение.