【问题标题】:The right way of setting <a href=""> when it's a local file本地文件时设置<a href="">的正确方法
【发布时间】:2012-08-14 20:18:11
【问题描述】:

我正在尝试链接到本地​​文件。我已将 href 设置如下:

<a href="file://C:/path/to/file/file.html">Link Anchor</a>
  • 在 Firefox 中,当我右键单击并“在新选项卡中打开链接”时,没有任何反应。

  • 当我右键单击并“复制链接位置”,然后手动打开一个新选项卡并粘贴复制的链接时,它工作正常。所以看来我的file:// 语法很好。我也尝试过使用 3 个斜杠,例如 file:///,但结果相同。

我做错了什么?

【问题讨论】:

标签: html file firefox hyperlink href


【解决方案1】:

根据定义,file: URL 是系统相关的,它们几乎没有用处。您的示例中的 URL 在本地使用时有效,即链接页面本身位于用户的计算机中。但是浏览器通常拒绝跟随它使用 HTTP 协议获取的页面上的 file: 链接,因此该页面自己的 URL 是 http: URL。当您单击此类链接时,什么也没有发生。目的大概是为了安全:防止远程页面访问访问者计算机中的文件。 (我认为这个功能首先是在 Mozilla 中实现的,然后复制到其他浏览器中。)

因此,如果您在计算机中使用 HTML 文档,则 file: URL 应该可以使用,尽管它们的语法存在系统相关问题(您如何在此类 URL 中编写路径名和文件名)。

如果您确实需要在您的计算机上处​​理一个 HTML 文档并在 Web 服务器上处理另一个 HTML 文档,使链接工作的方法是使用本地文件作为主要文件,如果需要,使用客户端脚本从服务器获取文档,

【讨论】:

  • 谢谢你。我一直在苦苦思索为什么我的文件链接不起作用。这需要标记为答案!
【解决方案2】:

在分层目录中组织您的文件,然后只使用相对路径。

演示:

HTML (index.html)

<a href='inner/file.html'>link</a>

目录结构:

base/
base/index.html
base/inner/file.html
....

【讨论】:

  • 我似乎不能这样做,因为数据文件夹和脚本位于不同的位置。我尝试做../../etc,但它不会超出脚本所在网站的主页。它不会一直到C:/ +1 虽然试图提供帮助。
  • 即使您没有理想的目录结构,也可以使用下面我的答案中显示的基本标记
  • 在 HTHML5 或 CSS 中是否有可能继承 &lt;a&gt; 标记的内容或各自对应的目标?我正在链接到文件,并希望确保显示的链接与文件名相对应。
【解决方案3】:

基本标记内的 href 值将成为您所有相对路径的参考点,从而覆盖您当前的目录路径值,否则 - '~' 是您网站的根目录

    <head>
        <base href="~/" />
    </head>

【讨论】:

    【解决方案4】:

    当您运行 IIS 并通过它运行 html 页面时,可能会发生这种情况,然后 Local file system 将无法访问。

    要使您的链接在本地工作,请直接从文件浏览器而不是 Visual Studio F5IIS 运行调用 html 页面,只需单击它以从文件系统打开,并确保您使用的是这样的链接:

    <a href="file:///F:/VS_2015_WorkSpace/Projects/xyz/Intro.html">Intro</a>
    

    【讨论】:

      【解决方案5】:

      ../html 文件名和 .html 用户可以这样做 这将解决您重定向到本地文件的任何页面的问题。

      【讨论】:

        【解决方案6】:

        尝试将冒号 : 换成条形 |。应该这样做

        <a href="file://C|/path/to/file/file.html">Link Anchor</a>
        

        【讨论】:

        • 如果您解释为什么应该这样做,可能会对用户有所帮助。我知道我想知道为什么会这样。
        【解决方案7】:

        设置a href=“”是本地文件的正确方法。 代码或文件在线时不会有任何问题。

        <a href="./your_file_name.html">FAQ</a>
        

        希望对你有所帮助。

        【讨论】:

          猜你喜欢
          • 2010-12-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-12-26
          • 2021-02-09
          • 1970-01-01
          • 2019-05-11
          • 2013-09-22
          相关资源
          最近更新 更多