БАЗА HREF, JavaScript и Internet Explorer против Firefox - PullRequest
Новая
       16

БАЗА HREF, JavaScript и Internet Explorer против Firefox

18 голосов
/ 11 марта 2009

Вопрос:

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

Контекст:

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

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

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

и на моей локальной машине разработчика это: 

$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 ( ProcessUserInput.php ) находятся в подкаталоге UsabilityTest. Другими словами, их фактический URL-адрес

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

$basehref . '/foxtrot/ProcessUserInput.php'

Проблема

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

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

$basehref . '/ProcessUserInput.php'

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

Решения

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

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

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

Ответы [ 6 ]

7 голосов
/ 12 марта 2009

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

Вместо 

window.location = URI;

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

window.location.assign( URI );

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

6 голосов
/ 11 марта 2009

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

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

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

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

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

Таким образом, установка относительного URL может показаться неопределенной операцией.

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

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

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

3 голосов
/ 05 сентября 2014

У меня была та же проблема сегодня, после некоторых исследований, я не смог найти какой-либо способ переопределить эту проблему в IE9, что является обязательным требованием для моего проекта, поэтому я применил следующий подход (на основе jquery, но это действительно легко сделать это простым 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');
3 голосов
/ 11 марта 2009

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

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

2 голосов
/ 30 апреля 2012

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

document.getElementBytagname('base').href
0 голосов
/ 08 февраля 2017

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

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

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

...