BASE HREF、javascript 和 Internet Explorer 与 Firefox答案

【问题标题】：BASE HREF, javascript, and Internet Explorer vs. FirefoxBASE HREF、javascript 和 Internet Explorer 与 Firefox
【发布时间】：2010-10-12 13:26:50
【问题描述】：

问题：

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) 都位于 UsabilityTest 的子目录中。换句话说，它们的实际 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 位于 basehref 的子目录中。但是，如果我将子目录名称添加到 javascript，它就不再适用于 IE。

解决方案？

我能想出几个办法来解决这个问题：

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

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

【问题讨论】：

标签： javascript html href

【解决方案1】：

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

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

【讨论】：

将字符串写入一个位置很好，文档可以追溯到 JS 1.0。请参阅docs.sun.com/source/816-6408-10/location.htm#1193137 – “如果将字符串分配给对象的位置属性，JavaScript 会创建一个位置对象并将该字符串分配给其 href 属性。”

【解决方案2】：

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

是的，这是一个可以追溯到 Netscape-vs-IE 早期的长期差异。

IE 仅在与文档元素交互时强制执行 base-href。所以，你可以createElement('a')，设置一个相对的href和click() it*，但是base-href会被忽略； appendChild 到包含 base-href 的文档中，它会起作用。

在其他浏览器上，base-href 被视为全局每个窗口并始终应用。哪个是对的？似乎未指定。原始的 JavaScript 文档只说 location.hash（因此，location 应用为字符串）：

代表一个完整的网址

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

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

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

我可能会做，是的，如果你死心塌地使用。

【讨论】：

谢谢，按照建议...我这样做了 window.location.href = document.getElementById("myBase").href + 'Company#!/companylist';它适用于 IE 和 Chrome

【解决方案3】：

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

代替

window.location = URI;

我正在使用这个：

window.location.assign( URI );

这在 IE 和 Firefox 中都是正确的。

【讨论】：

不，这不能解决 IE 中的基本 href 问题（从版本 8 开始）。当我看到可以解决的这么简单时，我的脸上露出了笑容，但它只持续了一分钟。
正如@Halil Özgür 所述，这不应该是公认的答案。

【解决方案4】：

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

document.getElementBytagname('base').href

【讨论】：

上面的行应该是：document.getElementsByTagName('base')[0].href

【解决方案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');

【讨论】：

【解决方案6】：

你总是可以使用 Vanilla JS :)

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

我希望这会有所帮助。

【讨论】：