BASE HREF、javascript 和 Internet Explorer 与 Firefox

Question

问题：

IE 和 Firefox / Safari 处理 BASE HREF 和 Javascript window.location 类型请求的方式似乎有所不同。 首先，这是对问题的准确描述吗？ 这是怎么回事？ 处理这种情况的最佳跨浏览器解决方案是什么？

上下文：

我有一个小型 PHP 平面文件 sitelet（它实际上是一个可用性测试原型）。

我在 PHP 中动态生成 BASE 标记的 HREF 值，即，如果它在我们公司的服务器上运行，则为：

$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) 都位于子目录中可用性测试。 换句话说，他们的实际 URL 是

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

$basehref 。 '/foxtrot/ProcessUserInput.php'

问题

IE 的 JavaScript 基本上似乎忽略了 BASE HREF。 javascript 和 PHP 处理器位于同一目录中，因此对 ProcessUserInput.php 的调用效果很好。 输入得到处理，一切正常。

但是，当我在 Firefox 上测试时，JavaScript 确实 似乎使用了 BASE HREF，因为脚本的输出被发送到此

$basehref . '/ProcessUserInput.php'

中断，因为 ProcessUserInput.php 位于基本引用。 但是，如果我将子目录名称添加到 javascript，它就不再在 IE 中工作。

解决方案？

我可以想出几种方法来解决这个问题：

• 在 Javascript 中，读取 BASE 标记的 HREF 属性并手动在 javascript 中添加 var URI ，调用完全解析的绝对 URL
• 使用 PHP 处理 .js 文件并将 $basehref 变量插入脚本中
• 移动文件 还有
• 其他内容吗？

我确信还必须有其他方法来解决这个问题。 当 IE 和 Firefox 在 JavaScript 中以不同方式应用 BASE HREF 时，处理 JavaScript 中 BASE HREF 的最佳方法是什么？

Answer 1

IE 和 Firefox / Safari 处理 BASE HREF 和 Javascript window.location 类型请求的方式似乎不同。

是的，这是一个长期存在的差异，可以追溯到 Netscape 与 IE 的早期。

IE 仅在与文档元素交互时强制执行 base-href。 因此，您可以createElement('a')，设置相对href并click()它*，但基本href将是被忽视； 将其appendChild到包含base-href的文档中，它就会起作用。

在其他浏览器上，base-href 被视为全局每个窗口并始终应用。 哪个是对的？ 好像没有具体说明。 原始 JavaScript 文档仅说明 location.hash （因此，location 作为字符串应用）：

代表一个完整的URL

因此将其设置为相对 URL 似乎是一个未定义的操作。

（*：link.click()是IE和Opera支持的非标准方法）

读取 BASE 标记的 HREF 属性并手动添加

如果您执意要使用

，我可能会这样做。

Answer 2

使用 window.location 的 assign 方法似乎是最直接的答案。

而不是

window.location = URI;

我使用这个：

window.location.assign( URI ); 

这在 IE 和 Firefox 中都做了正确的事情。

Answer 3

只需在链接前添加 $('base').attr('href') 即可。 （使用jquery）或

document.getElementBytagname('base').href

Answer 4

我相信你想修改window.location.pathname，而不是window.location。 window.location 是一个 Location 对象，它有多个变量。 因此，改变它的影响还没有明确定义。 但是，window.location.pathname 被定义为相对于主机的路径，这正是您想要的。

如果您想详细了解可以在 window.location 中更改的许多变量，我会检查 这里。 根据 Mozilla 的文档，更改 window.location 中的任何变量都应该使用与这些更改相对应的新 URL 重新加载页面。

Answer 5

我今天遇到了同样的问题，经过一番研究，找不到任何方法来覆盖 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');

Answer 6

您始终可以使用 Vanilla JS :)

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

我希望这会有所帮助。