BASE HREF, javascript и Internet Explorer против Firefox

Вопрос:

IE и Firefox/Safari, похоже, по-разному обрабатывают запросы типа BASE HREF и Javascript window.location. Во-первых, это точное описание проблемы? Что происходит? И какое лучшее кросс-браузерное решение для решения этой ситуации?

Контекст:

У меня есть небольшой сайт с плоским файлом PHP (он фактически является прототипом тестирования юзабилити).

Я динамически генерирую значение HREF тега BASE в PHP, то есть, если он работает на сервере нашей компании, это:

$basehref = 'http://www.example.com/alpha/bravo/UsabilityTest/';

и на моей локальной машине dev, это:

$basehref = 'http://ellen.local/delta/echo/foxtrot/UsabilityTest/';

Для одной из задач я собираю некоторый пользовательский ввод, делаю некоторые преобразования на нем в Javascript и отправляю серверу с помощью следующего кода:

function allDone() {
    // elided code for simplicity of stackoverflow question
    var URI = "ProcessUserInput.php?";
    URI = URI + "alphakeys=" + encodeURI( keys.join(",") );
    URI = URI + "&sortedvalues=" + encodeURI( values.join(",") );
    window.location = URI;
}

Оба файла javascript (содержащие функцию allDone()) и обработка PHP script (ProcessUserInput.php) живут в подкаталоге UsabilityTest. Другими словами, их фактический URL-адрес

http://www.example.com/alpha/bravo/UsabilityTest/ foxtrot/ProcessUserInput.php  aka

$basehref . '/foxtrot/ProcessUserInput.php'

Проблема

IE JavaScript, по-видимому, игнорирует BASE HREF. Javascript и PHP-процессор живут в одном каталоге, поэтому вызов ProcessUserInput.php работает отлично. Вход обрабатывается, и все работает нормально.

Но когда я тестирую Firefox, JavaScript, похоже, использует BASE HREF, потому что вывод script отправляется на

$basehref . '/ProcessUserInput.php'

Это прерывается, потому что ProcessUserInput.php находится в подкаталоге basehref. Однако, если я добавлю имя подкаталога в javascript, он больше не работает в IE.

Решения?

Я могу придумать несколько способов решить эту проблему:

  • В Javascript прочитайте свойство HREF тега BASE и вручную добавьте var URI в javascript, вызывая полностью разрешенный абсолютный URL
  • Обработайте файл .js с помощью PHP и вставьте переменную $basehref в script
  • Переместить файлы вокруг
  • Что-то еще?

Я уверен, что должны быть и другие способы решения этой проблемы. Какой лучший способ справиться с BASE HREF в JavaScript, когда IE и Firefox применяют его по-разному в JavaScript?

Ответы

Ответ 1

Использование метода assign для window.location кажется наиболее простым ответом.

Вместо

window.location = URI;

Я использую это:

window.location.assign( URI );

который делает правильные вещи как в IE, так и в Firefox.

Ответ 2

IE и Firefox/Safari, похоже, по-разному обрабатывают запросы типа BASE HREF и Javascript window.location.

Да, это давняя разница, начиная с ранних дней Netscape-vs-IE.

IE принудительно устанавливает base-href только в том месте, где взаимодействует элемент документа. Таким образом, вы можете createElement('a') установить относительные href и click() it *, но base-href будет проигнорирован; appendВведите его в документ, содержащий base-href, и он будет работать.

В других браузерах base-href воспринимается как глобальное per-window и всегда применяется. Какой правильный? Это кажется неуказанным. В исходных документах JavaScript указано только то, что location.hash (и, следовательно, location применяется как строка):

представляет полный URL

Поэтому настройка относительного URL-адреса будет выглядеть как undefined.

(*: link.click() - нестандартный метод, поддерживаемый IE и Opera)

прочитайте свойство HREF тега BASE и вручную добавьте

Вероятно, что бы я сделал, да, если вы мертвы на использовании <base> .

Ответ 3

Я считаю, что вы хотите изменить window.location.pathname, а не window.location. window.location - это объект Location, который имеет несколько переменных. В результате эффекты его изменения недостаточно четко определены. Однако window.location.pathname определяется как путь к хосту, который вам нужен.

Если вы хотите больше узнать о многих переменных, которые вы можете изменить в window.location, я бы проверил здесь. Согласно документации Mozilla, изменение любой переменной в window.location должно перезагрузить страницу с новым URL-адресом, соответствующим этим изменениям.

Ответ 4

просто добавьте $('base').attr('href') перед ссылкой. (используя jquery) или

document.getElementBytagname('base').href

Ответ 5

У меня была та же проблема сегодня, после некоторых исследований, не удалось найти способ переопределить эту проблему в IE9, что является требованием для моего проекта, поэтому я сделал следующий подход (jquery based, но это действительно легко сделать это в простом javascript).

href = function(url){
    if ($("base").length > 0 ){
        location.href= $("base").attr("href")+url;
    }else{
        location.href = url;
    }
}

И затем измените

location.href= 'emp/start'

к

href('emp/start');

Ответ 6

Вы всегда можете использовать Vanilla JS:)

var href = document.getElementBytagname('base')[0].href

Надеюсь, это поможет.