HTML/JavaScript链接到本地文件

3
我可以帮您翻译,以下是翻译结果:

我正在尝试使用JavaScript显示本地文件的链接,但它没有起作用。我不确定我做错了什么。

HTML代码如下:

<!DOCTYPE><HTML>
<head>
    <title>Name</title>
    <meta charset="UTF-8"/>
    <link href="C://wamp/www/Projects/File/stylesheet.css" type="text/css" rel="stylesheet">
    <link href="C://wamp/www/jquery-ui-1.10.3.custom/css/Mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src='http://jquery.com'></script>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
    <script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="C://wamp/www/Projects/File/jscript.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="content">
    <div id="list">
    <ul>
        <li><a href="#">text</a></li>
        <li><a href="#">text <small>text</small> text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family:Andale Mono"><a href="#"> &#x2603 text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family:fantasy"><a href="#">&#x2600 text &#x2600 </a></li>
        <li><a href="#">text</a></li>
        <li style="font-family: Bitstream Vera Sans Mono"><a href="#">(text)</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#"><mark>text</mark></a></li>
        <li><a href="#">text &#x231B </a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div> 
</div>
<a href="C://wamp/www/Projects/tile/name.docx"id="background">  
</body>
</html>

样式表为:

#content {
    background-color: #030505;
    height:100%;
    width:100%;
}

#list{
    height:100%;
    width:100%;
    position:relative;
    margin:0 auto;
    overflow:hidden;
}

#list ul, #list li{
    list-style:none;
    margin:0;
    padding:0;
}

#list a{
    position:absolute;
    text-decoration: none;
    color: #444444;
}
#list a:hover{
    color: #EB7500;
}

#background {
    width: 100%;
    height: 100%;
    position: fixed;
}

并且JavaScript代码如下:

$(document).ready(function () {
    var element = $('#list a');
    var offset = 0;
    var stepping = 0.03;
    var list = $('#list');
    var $list = $(list);
        $list.mousemove(function (e) {
            var topOfList = $list.eq(0).offset().top;
            var listHeight = $list.height();
            stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--) {
    element[i].elemAngle = i * Math.PI * 2 / element.length;
        }
    setInterval(render, 30);
function render() {
    for (var i = element.length - 1; i >= 0; i--) {
        var angle = element[i].elemAngle + offset;
            x = 120 + Math.sin(angle) * 10;
            y = 45 + Math.cos(angle) * 40;
            size = Math.round(40 - Math.sin(angle) * 20);
                var elementCenter = $(element[i]).width() / 2;
                var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
                    $(element[i]).css("fontSize", size + "pt");
                    $(element[i]).css("opacity", size / 100);
                    $(element[i]).css("zIndex", size);
                    $(element[i]).css("left", leftValue);
                    $(element[i]).css("top", y + "%");
                }
                offset += stepping;
            }
});

$(function(){
    $('#content').click(function(){
        $(this).hide();
        $('#background').show;
    });
});

当我点击内容时,只显示一个空白屏幕。我已经尝试了所有我知道的链接方法,但我确定我错过了一些愚蠢的东西,这让我很疯狂!我甚至不能让我的jquery .show做任何像爆炸或膨胀之类的输入,但如果我使用带有文本和边框的div元素,它就会显示出来。请帮忙!非常感谢。

为什么不使用 http://localhost/?我们能否了解你的 目录结构 以及 这个页面 存储在哪里? - undefined
2
你试过这样吗?<a href="file:///C:/wamp/www/Projects/tile/name.docx">链接 1</a> - undefined
http://jquery.com 的链接指向 jQuery 的主页,而不是任何 JavaScript 文件。 - undefined
我在使用WAMP时遇到了一些问题。它不再像以前那样让我访问文件,我也不确定原因是什么。我过去打开它时会看到一个包含mysql和php等内容的屏幕,现在却显示我无权访问,这对我来说完全没有任何意义。所以我将文件保存在本地,希望能够将整个文件夹压缩并发送给他人,让他们打开html文件。 - undefined
我删掉了jquery.com这一行。我有时候上一些在线课程,它们给我提供了一些我不需要或者并不起作用的信息,真是让我困惑:/ 自学对我来说真的很难,因为网络上充斥着那么多错误的信息。谢谢你帮我找到了这个问题,我很感激。 - undefined
JetAbe!这个方法有效!但是我希望它只是打开文件而不是提供一个可点击的链接。有没有办法做到这一点? - undefined
3个回答

8

您的页面中有一些需要更正的地方:

<script type="text/javascript" src='http://jquery.com'></script> <!-- This is Absolutely Wrong -->
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

要加载本地脚本,请使用file:///

因此:

<script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>  <!-- Also It is C:/ not C:// -->

将会是:

<script type="text/javascript" src="file:///C:/wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>

通过使用file:///C:/代替所有<script>src<a><link>href,可以解决您的问题。但是,由于您正在使用wamp,因此打开它并使用http://localhost,同时使用相对路径到页面会更加容易。一般来说,最好使用相对URL,这样您的网站将不会绑定到当前部署位置的基本URL。例如,它将能够在本地主机和公共域上工作,而无需进行修改。详见:Absolute vs relative URLshttp://www.webdeveloper.com/forum/showthread.php?208825-lt-script-gt-with-source-as-a-local-file。希望这能解决问题。

你把jQuery和Ajax的代码写得完全错误。我该如何纠正这些代码? - undefined
@Mary请删除以下代码行:<script type="text/javascript" src='http://jquery.com'></script>,因为它是一个网站地址,而不是javascript文件的地址。另外,在那行代码之后,你正确地引入了JQuery,使用了:<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>。所以第一行是不必要且错误的。 - undefined
我已经删除了它。非常感谢你的帮助,真的很感激。 - undefined
@Mary 我很高兴我能帮到你。 - undefined
在Windows计算机上,链接到file://C可能没问题,但如果用户使用其他操作系统,比如Mac或Linux,该怎么办呢?难道没有办法从Web浏览器链接到本地文件吗? - undefined
@JoshuaRobison,如前所述,你必须避免使用绝对路径,应该使用相对路径。然而,在Mac和Linux系统中,如果你确实需要使用绝对路径,你可以使用类似于file:///usr/local/bin/的方式。如果你需要知道文件的绝对路径,可以使用pwd命令。 - undefined

0
如果您在本地运行脚本(通过浏览器的“文件”->“打开”菜单选项),则不需要驱动器号,除非它位于其他驱动器上。如果您想使用任意路径,请在前面加上file://。换句话说,您可以在任何可以使用http://的地方使用file://
请记住,所有路径都是相对于脚本所在位置的。

0
当你这样做时,链接将不会将文件下载到你的客户端,我想这就是你想要的。
如果这个页面要通过互联网提供,你不应该使用相对于你的计算机的URL,而是相对于服务器计算机的URL:
1. 我会搜索一下web服务器正在服务的文件夹:p。在你的情况下似乎是:`c:\wamp\www` 2. 尝试将链接href更改为`/Projects/tile/name.docx`。这是相对于服务器的URL,这意味着当用户在你的页面中,例如:`http://localhost`,点击链接时,用户会尝试访问:`http://localhost/Projects/tile/name.docx`。 3. 服务器将在其文件系统中搜索`c:\wamp\www\Projects\tile\name.docx`。
请注意,文件系统URL `c:\wamp\www\..` 和 `http://localhost/...` 形式的URL 是不同的。
在这种情况下,您希望在页面中使用形式为http://...的URL,因为如果您使用文件系统URL,当查看您的页面的人点击链接时,浏览器会在该人的计算机上搜索文件,而不是在服务器计算机上搜索。
此外,您可能希望在每个出现的地方删除c:/wamp/www/,只保留/
我希望我没有理解错您的意思。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接