Абсолютные пути в HTML некорректно обрабатываются в Firefox

iddqt · №1

Обкатывается сайт, запускаю index.html локально с винта.
сайт в корне диска, в корне же директорий с графикой "img"
в общем, есть в исходнике строка типа следующей:
img src="/img/surf.gif"
Т.е. картинка должна искаться в директории "img", которая в корне.
Firefox же не хочет ее там искать. А указывать, например, "d:/img/surf.gif", согласитесь, неудобно, я же не для диска D: делаю сайт.
В то же время IE все понимает правильно и отображает все картики с абсолютными путями.
Так вот вопрос - это баг (или фича) Mozillы ?
Это исправляемо или обхождаемо? Есть ли костыли?
спасибо.

Azathoth · №2

iddqt, кажется есть тег <BASE>
По идее так должно помочь:
<base href="file://d:/">
Только придется в каждый html файл его прописать на время обкатки.
Прверить не могу, т.к. винды под рукой нет...

А еще лучше поставить какой-нибудь легкий web-сервер...

Отредактировано Athathoth (19-04-2006 07:41:55)

petrovich · №3

img src="img/surf.gif"

iddqt · №4

Тэг <BASE> оказал частичное влияние: только на ссылки на странице. Ресурсы же, графика в т.ч. так и остались недоступны.

Azathoth · №5

Кстати, а чем абсолютные пути лучше относительных?
Я лично наоборот абсолютных стараюсь избегать

iddqt · №6

Athathoth пишет

Кстати, а чем абсолютные пути лучше относительных?
Я лично наоборот абсолютных стараюсь избегать

Согласен, что ничем не лучше, вопрос не в том. Просто столкнулся и захотел разобраться.
Почему не работает именно в Mozille, и не помогает <BASE>.
Дело в том, что Mozilla ищет ресурсы не в "file:///d:/img/", к примеру, а в "file:///img/", т.е. по примеру *nix систем в корне монтирования всех девайсов, что ли ?

petrovich · №7

У меня на жёстком работают оба варианта:

Отредактировано petrovich (19-04-2006 08:18:35)

Al_H · №8

/ - это корень, в системе он не приравнивается к букве диска. Насколько я понимаю, в Windows это должен быть Каталог, в котором диски, то есть пути могут быть вроде /D:/folder1/ или /F:/folder1/ но хорошо бы еще явно прописать протокол file:, что предполагает абсолютные пути. Однозначность возникает только на сервере, локально же лучше относительные пути.

iddqt · №9

petrovich пишет

У меня на жёстком работают оба варианта:
<img src="img/surf.gif">
<img src="file:///D:/img/surf.gif">

<img src="img/surf.gif"> - это относительный путь.
<img src="file:///D:/img/surf.gif"> работает безусловно.
Рассматривается же именно <img src="/img/surf.gif"> с начальным слешем, предполагающим корень.

Al_H пишет

/ - это корень, в системе он не приравнивается к букве диска.

IE понимает, что это именно корень текущего диска, например "D"

Al_H · №10

IE понимает, что это именно корень текущего диска

"Понимает" тут не совсем верно. Буквы дисков - это не домены. Более того, адрес /C:/folder1/ Експлорер воспринимает точно так же как Fx, но почему-то приравнивает к нему адрес с пропущенной буквой диска. Представьте, что на сервере одинаково обрабатываются адреса /c/docfolder/umh.pdf и /docfolder/umh.pdf - чем это можно будет объяснить, кроме редиректа? Просто если смотреть на то, что делает IE, как на некую норму, то в любом случае, когда другой браузер делает что-то по-другому, это будет отклонением. Например, такая-то страница Експлорер выносит напрочь, а Fx на ней просто немножко притормаживает. Или Fx некую сверстанную по стандартам страницу выводит абсолютно правильно, и IE тоже, за исключением того, что меню проваливается под контент. И в том и в другом примере поведение Fx будет ненормальным.
Именно за это я и не люблю пути типа /somepath или file:///C:/somepath на локальных страницах - вечные с ними проблемы. Либо документ переносят, и все пути сбиваются - для любого браузера, либо IE воспринимает путь одним образом, Fx другим, а Опера - третьим, да еще и добавляет localhost зачем-то.

hasherfrog · №11

Какая-то дикая путаница :-) Почитайте: http://www.ietf.org/rfc/rfc3986.txt
Вообще, следует указать базу (<BASE>) как

Выделить код

Код:

file://localhost/C:/

(это как пример. сделайте, кстати, такую закладку на панель задач - просто перетащите - вы удивитесь :])

ViRUS · №12

hasherfrog

(это как пример. сделайте, кстати, такую закладку на панель задач - просто перетащите - вы удивитесь :])

Ух ё! А как? Почему? У меня же нет вэб-сервера!

stoneflash · №13

ViRUS
Видно он и не нужен. А так - полезно...

iddqt · №14

hasherfrog пишет

Какая-то дикая путаница :-) Почитайте: http://www.ietf.org/rfc/rfc3986.txt
Вообще, следует указать базу (<BASE>) как
Выделить код
Код:
file://localhost/C:/
(это как пример. сделайте, кстати, такую закладку на панель задач - просто перетащите - вы удивитесь :])

"file://localhost/C" тоже не помог... Быть может, хрен с ними, с этими путями абсолютными...

Al_H · №15

Быть может, хрен с ними, с этими путями абсолютными...

Очень верное решение. Если не секрет, зачем они Вам были нужны?

hasherfrog · №16

Al_H
Для обкатки сайта :-) вверху написано.

iddqt
Вопрос действительно оказался прелюбопытным.
Для интереса я сделал html

Выделить код

Код:

<HTML><HEAD><BASE href="file://localhost/c:/">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Document Title</TITLE></HEAD><BODY>
<img src="/temp/c.gif"><hr><img src="/temp/d.gif">
</BODY></HTML>

Так вот Мозилла действительно резольвит абсолютные пути относительно "autority", указанной в <BASE>, а IE - относительно "autority/path". Возникает вопрос, а кто правильно? :-)

Сел внимательно читать. Нашёл.
Согласно http://www.ietf.org/rfc/rfc1808.txt правильно поступает мозилла.
Согласно пункту 4. Resolving Relative URLs,прохождение алгоритма образования пути:
Step 1 - skip --> Step 2.с --> Step 3 - skip --> Step 4 оппа!!! --> Step 7

Это я к чему. Не лечится. Только указывать диск в ссылке (что по условию задачи не подходит). И мой "конгениальный совет" выше [Вчера 14:05:00] не сработает.

Al_H · №17

Для обкатки сайта :-) вверху написано.

Для обкатки лучше настроить Апач (что несложно), и ходить через localhost/

Согласно http://www.ietf.org/rfc/rfc1808.txt правильно поступает мозилла.

Вот поэтому я локальные абсолютные ссылки и не люблю. Слишком много разночтений.

hasherfrog · №18

Про апач - это кому как. Про "люблю" - вот, некоторым вона как приходится пыхтеть :] Но это оффтоп. Главное, мораль темы-то:

Абсолютные пути в HTML корректно обрабатываются в Firefox

:]

iddqt · №19

hasherfrog пишет

Главное, мораль темы-то:
Абсолютные пути в HTML корректно обрабатываются в Firefox

Да не мораль нужна в данном случае и не хотелось бы опять скатываться до выяснения "кто правильнее обрабатывает". Вопрос в том

"как заставить Firefox отрабатывать абсолютные ссылки на ресурсы"?

А вот поразмыслив глубже, я пришел в выводу, что (ИМХО, конечно) корень данной проблемы кроется именно в корне (простите за тавтологию). Точнее, что со времен ДОСа файловая система построена на том, чтобы не замечать главного корня, а каждый раздел - "СамСебеКорень". Поэтому IE в данном случае намного ПРОЩЕ!
Это, конечно, тоже оффтопик... Прошу не распространять далее эту мысль.

hasherfrog · №20

Извините за задержку, инета не было. Как всё-таки неприятно, когда решение
готово, а из-за провайдера (билайн, GPRS) не можешь выйти в сеть... Грррр...

>> "как заставить Firefox отрабатывать абсолютные ссылки на ресурсы"?
Правильнее сказать "как заставить Firefox неправильно отрабатывать..." :]
Вам ещё надо?

Решением будет использование Greasemonkey с соответствующим скриптом.
Сам по себе Greasemonkey - универсальный инструмент, не подвёл и тут :]
Как данное расширение установить... Я не буду рассказывать, ладно?
И не буду объяснять, как устанавливать для Greasemonley скрипты.
Вкратце можете посмотреть... эммм... ну хоть тут (очень коротенько).
Лучше, конечно, сходить на сайт разработчиков, там всё-всё написано.

Скрипт такой:

Выделить код

Код:

// ==UserScript==
// @name          Disk Falsificator
// @namespace     file://localhost/
// @description	  Apply content of <BASE href=' '> tag to absolute links like IE does
// @include       file://localhost/*
// @include       file:///*
// ==/UserScript==

var string2correct = "file://localhost/";
var base;

function substBase(tag, atr)
{
	var items = document.getElementsByTagName(tag);
	for (var i = 0; i < items.length; i++)
		//ignore reletive links
		if (items[i].getAttribute(atr).charAt(0) == '/')
			//ignore correct links
			if (items[i][atr].indexOf(base) == -1)
				//replace links
				items[i][atr] = items[i][atr].replace(string2correct, base);
}

//get base value
var baseTags = document.getElementsByTagName("base");
//check if base exists
if (baseTags && baseTags.length)
{
	base = baseTags[0].href;
	//only for pages from localhost
	if (base.indexOf(string2correct) != -1)
	{
		substBase('img','src');
		substBase('a','href');
	}
}

Ньюансы эксплуатации такие:
1. Работает только для localhost (см. namespace)
2. Внутри html-ок, в <BASE href="file://localhost/C> указывайте нужную букву диска.
Подстрока "file://localhost/" внутри <BASE> должна быть в нижнем регистре.
Если <Base>-ов много (что странно :]), используется только первое упоминание.
3. Скрипт действует только на <a> и <img> теги в документах. Если надо расширить,
например, на iframe, или ещё на какие-то (я ведь только недавно видел огромный
список, а уже всё позабыл... :[), добавьте нужные строки после substBase('a','href');
Первый аргумент - тег, второй - свойство, которое надо "поправить".
4. На фреймы скрипт не действует. Если надо, допишите перебор фреймов (хотя
скрипт может(?) и сильно усложниться; искренне надеюсь, что Вам не нужно).

Скрипт проверен на Mozilla Firefox 1.5.0.2 и Greasemonkey 0.6.4. Всё работает.

Удачи.

iddqt · №21

hasherfrog пишет

Решением будет использование Greasemonkey с соответствующим скриптом...

Спасибо за наводку. Я не стал заморачиваться с Greasemonkey, а просто написал на основе предложенного кода небольшой js-файлик, который подключаю в тексте отлаживаемой страницы одной строкой.

Во-первых, добавил substBase('link','href') для подгрузки стилей. Но вот проблема - не отображаются фоны с абсолютным путем {background-image: url(/img/bg.gif);}. Поэтому до кучи написал функцию для обхода и замены абсолютных путей в стилях. Вкратце:

Выделить код

Код:

base = file://localhost/C:/';
...

  string2correct = "url(/"
  base = "url(" + base;

  reStyle('backgroundImage');
  reStyle('cursor');
  reStyle('font');
...

function reStyle(attr) {
  var items = (document.styleSheets) ? document.styleSheets[0] : null;
  if (!items||!items.insertRule) return;
  items=items.cssRules;
  for (var i = 0; i < items.length; i++)
    if (eval('items[i].style.' + attr).length > 0)
      if (eval('items[i].style.' + attr).substring(0, string2correct.length) == string2correct)
        if (eval('items[i].style.' + attr).indexOf(base) == -1)
          eval('items[i].style.' + attr + ' = items[i].style.' + attr + '.replace(string2correct, base)');
}

Спасибо!

Полезная информация