HTML <base> TAG 和 Internet Explorer 的本地文件夹路径答案

【问题标题】：HTML <base> TAG and local folder path with Internet ExplorerHTML <base> TAG 和 Internet Explorer 的本地文件夹路径
【发布时间】：2023-03-15 01:35:01
【问题描述】：

我正在尝试使用 TAG 来指示包含位于单独文件夹中的我的 html 页面的媒体文件的源文件夹。

我有以下文件夹结构：

A
|- HTML_PAGES        (contains html files)
|- MEDIA_FOLDER      (contains the media used by this html pages)

我尝试用 html 页面使用的媒体来指示 html 文件 - 所以，在每个 html 文件中我都有这样的内容：

<base href="../MEDIA_FOLDER"/>

问题是：它适用于某些浏览器（Opera、Chrome），但不适用于 Internet Explorer 和 Firefox。如何让它在 IE 和 Firefox 上运行？

【问题讨论】：

哪个版本的IE？ IE8 有一个错误，即使用 FILE URI 方案的页面/资源未正确遵守 BASE 标记。 Firefox 有一个安全限制，仅授予本地 HTML 页面访问主页面的子路径的权限。
这又是一个糟糕的 Internet Explorer 遇到的问题……

标签： html internet-explorer

【解决方案1】：

这绝对是IE中一个很烦人的bug，不过我刚刚找到了解决办法。

要意识到的是，IE 确实解析了相对路径，然后立即忽略它。您甚至可以稍后使用 JavaScript 检查基本标记的“href”属性的值来查看完全解析的 URL。所以这段（相当愚蠢的）代码将<base>标签的'href'属性重置为IE已经解析的非常完整的URL，从而使其不再被忽略。

将以下 HTML 添加到页面顶部，紧随标签之后和实际使用任何 URL 之前：

<!--[if IE]><script type="text/javascript">
    // Fix for IE ignoring relative base tags.
    (function() {
        var baseTag = document.getElementsByTagName('base')[0];
        baseTag.href = baseTag.href;
    })();
</script><![endif]-->

（条件 cmets 是必需的，因为此代码会破坏 Safari/Chrome 中的 <base> 标签，而其他浏览器显然不需要它。）

真是个愚蠢的错误。

【讨论】：

这为我节省了很多时间。我在项目的层次结构中有一些测试 html 文件（可以从不同的路径托管，因此 URL 需要是相对的）并且设置基本 href 肯定会有所帮助。 <base href="../../../..">我只需要弄清楚点一次！干得好！
在测试用例 html 文件中我也遇到了这个错误。 <base> 标签的常见用途。乐意效劳！ :)
试过这个，但我得到了与以前完全相同的行为：在 Firefox 中工作（有或没有脚本），但在 IE 8 中，URL 与未设置基本 href 时相同（即，我的基本 href="../.."，计算的 URL 是 2 级目录太深）。
太棒了！正是我需要的！

【解决方案2】：

看起来 IE8 和 IE9 存在两个不同的问题。

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/c51bb8b9-40ab-437b-a125-88b660f3e1ca/

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/e5cfdf07-494c-4703-aa4a-34a1a548de05/

似乎在 IE8 和 IE9 中有效的解决方法是在基本 href 中包含 http://。我在 Firefox (v9) 中没有遇到任何问题

【讨论】：

【解决方案3】：

使用绝对网址：

<base href="http://yourdomain.com/MEDIA_FOLDER"/>

【讨论】：

不幸的是，这些页面是在本地引用媒体的单个 html 文件，没有 Web 服务器。无论如何 - 它可能有用吗？
当页面在最终投入生产之前通常要经过多个环境时，使用绝对 URL 不是一个可接受的解决方案。

【解决方案4】：

<base href="../MEDIA_FOLDER"/>

没有尾部斜杠，因此它指的是一个名为MEDIA_FOLDER 的文件，而不是文件夹。通常您不会注意到差异，因为 Web 服务器会将获取 folder 的尝试重定向到正确的地址 folder/，然后通常会返回默认文档（例如 folder/index.html）。但对于相对 URL 解析，它确实有所作为。

target 相对于/folder 不是/folder/target，它只是/target。要使其成为/folder/target，您必须通过添加尾部斜杠让浏览器知道基本 URL 是一个文件夹：

<base href="../MEDIA_FOLDER/"/>

这里没有不同的浏览器行为的原因。但是，如果您不小心使用了 Windows 文件系统样式的反斜杠 \ 而不是 /，那么您可能会发现不同的浏览器行为，所以一定要检查一下。

【讨论】：

你对斜杠的看法是对的，但是：适用于 Opera 和 Chrome，但不适用于 IE 和 Firefox。

【解决方案5】：

Richard 的回答让我接近了可行的解决方案，这就是我最终适应的解决方案。

<!--[if IE]><script type="text/javascript">
    // Fix for IE ignoring relative base tags.
    (function() {
        var baseTag = document.getElementsByTagName('base')[0];
        baseTag.href = window.location.protocol + '//' + window.location.host + baseTag.href;
    })();
</script><![endif]-->

【讨论】：

【解决方案6】：

我不确定 BASE 如何处理目录相对 url，尝试给它一个根相对 url，比如

<base href="/MEDIA_FOLDER"/>

【讨论】：

实际上您是在谈论使用必须以/ 开头的站点根路径。也可以用/ 结束它们。

【解决方案7】：

您的base 元素是否在body 元素内？这可能会导致问题。（检查 Firebug，即使您的代码乍一看还不错，它也可能最终出现在 body 中。）

【讨论】：

我的html代码：

【解决方案8】：

这是一个已知问题，IE 需要关闭标签，而 Firefox 则不需要，其他浏览器根本不关心。这对我有用：

<base href="{BASE_PATH}"><!--[if IE]></base><![endif]-->

随意调整，当然用你的实际路径替换 {BASE_PATH}，我通常使用绝对路径，但我也看到了相对路径也可以这样做

编辑：请注意，您的路径应以斜杠结尾

【讨论】：

这对我在 IE 9 中进行测试没有任何影响。仅使用绝对 URL 来修复它。
很抱歉这对您没有任何影响，但这是一个已知错误。请参阅ruthsarian.wordpress.com/2006/01/31/ie-base-tag-bug 现在请删除您的反对票

【解决方案9】：

我认为阅读本文的人正在处理企业或遗留 Web 应用程序。

我们不能依赖 IE 条件注释，因为它可能会被 IE 忽略，信不信由你。至少，这是我坚持的案例。

我在脚本下方添加了与浏览器功能无关的脚本。

它在 IE11 中在 IE-5-7-8-9-10-11 渲染模式下使用 HTML5 <!DOCTYPE html> 进行了测试。
使用 IE 企业模式 和不使用。

它适用于像../MEDIA_FOLDER/ 这样的相对路径。

它适用于my_child_folder/MEDIA_FOLDER/，IE7-5 除外。
我有点懒得修复它并鼓励您使用根路径。
IE。只需使用/some_root_folder/my_child_folder/MEDIA_FOLDER/ 而不是my_child_folder/MEDIA_FOLDER/。 （或者改进我的脚本，或者不要使用 IE7-5。）

我们这里有两个主要错误和一堆案例。

首先，IE9 和 IE8 会自动将 href 属性中的路径值转换为 URL。他们这样做，就像所有现代浏览器一样。
但是 IE 页面没有看到这种自动更改。我们只是通过重新分配 href baseTag.href = baseTag.href 来解决这个问题。

其次，IE7-5 不会自动将路径值转换为 URL 值。我们应该手动完成。

还有其他情况会稍微改变 IE 的行为。这取决于

您使用什么 DOCTYPE。
如何呈现基本标签 - <base/>、<base></base> 或 <base>。
您的 IE 企业模式 如何处理 IE 兼容性视图 设置。

例如，如果您将 IE Enterprise Mode 设置为 IE8 并设置了 Compatibility View，那么 IE 将设置 IE7 User-Agent HTTP 标头和 ASP.NET 表单将为 IE7 渲染。
或者 IE 条件注释 在弹出窗口、框架、iframe 或常见页面上将被忽略。这些都是我的真实案例。

(function () {
    // Fixes old IE wrong behaiors of the href attribute of the base tag.

    var preventIeHrefIgnoring = function (baseTag) {
        var docMode = document.documentMode;
        var isIe = docMode;
        if (!isIe)
            return;
        if (docMode != 8 && docMode != 9)
            return;

        // IE8 and IE9 auto-convert path-like values of the href attribute, but do not apply it on the page.
        // It is fixed by re-assining.
        baseTag.href = baseTag.href;
    }

    var baseColl = document.getElementsByTagName('base');
    if (!baseColl.length)
        return;
    var baseTag = baseColl[0];

    var initialHref = baseTag.href;
    if (!initialHref)
        return;

    var hrefIsUrl = initialHref.indexOf("https://") == 0 || initialHref.indexOf("http://") == 0;
    if (hrefIsUrl) {
        preventIeHrefIgnoring(baseTag);

        return;
    }

    // Below we are dealing with IE7-5 only.

    var targetHref = initialHref.indexOf('/') == 0 ? initialHref : "/" + initialHref;

    var resultHref = window.location.protocol + "//" + window.location.host + targetHref;
    baseTag.href = resultHref;
})();

【讨论】：