【问题标题】:html/javascript link to a local filehtml/javascript 链接到本地​​文件
【发布时间】:2014-06-04 17:12:32
【问题描述】:

我正在尝试使用 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>

css 是:

#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/?我们能知道您的directory structure 以及this page 的存储位置吗?
  • 你试过这样吗? 链接1
  • http://jquery.com 链接到 jQuery 主页,而不是任何 js 文件。
  • 我在使用 WAMP 时遇到了一些问题。它不允许我像以前那样访问文件,我不确定为什么。我曾经打开它并得到一个带有mysql和php之类的屏幕,现在它说我无权访问它,这对我来说根本没有任何意义。这就是为什么我将文件保存在本地,希望能够压缩整个文件,将其发送给某人,然后让他们打开 html 文件。
  • 我删除了 jquery.com 行。我参加的其中一些在线课程真的让我对我不需要的信息或不起作用的信息感到困惑:/ 有这么多糟糕的信息,我自己很难学会这一点。谢谢你帮我抓住了。我很感激

标签: javascript jquery html css


【解决方案1】:

您的页面有一些更正:

<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:/ 而不是C:// 用于所有&lt;script&gt;src&lt;a&gt;&lt;link&gt;href 将解决您的问题。

但是当你使用wamp时,打开它并使用http://localhost,同样使用relative paths到页面会更容易。通常,使用相对 URL 被认为是最佳实践,这样您的网站就不会绑定到当前部署位置的基本 URL。例如,它无需修改即可在 localhost 以及您的公共域上运行。

更多信息请见:Absolute vs relative URLshttp://www.webdeveloper.com/forum/showthread.php?208825-lt-script-gt-with-source-as-a-local-file

希望它能解决问题。

【讨论】:

  • 您的 jquery 和 ajax 行是绝对错误的。如何更正这些线条?
  • @Mary 只需删除行:&lt;script type="text/javascript" src='http://jquery.com'&gt;&lt;/script&gt; 因为它是站点地址而不是 javascript 文件地址。此外,您在该行之后正确地包含JQuery,使用:&lt;script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'&gt;&lt;/script&gt;。所以第一行是不必要和错误的。
  • 我删除了它。非常感谢你的帮助。非常感谢
  • @Mary 很高兴能帮到你。
【解决方案2】:

如果您在本地运行脚本(通过浏览器的文件 -> 打开菜单选项),则不需要驱动器号,除非它位于不同的驱动器上。如果您想使用任何您想要的路径,请在前面使用 file://。换句话说,您可以在任何可以使用 http:// 的地方使用 file://

请记住,所有路径都是相对于脚本位置的。

【讨论】:

    【解决方案3】:

    当你这样做时,链接不会将文件下载到你的客户端,我想这就是你想要的。

    如果要通过 Internet 提供此页面,则不应使用相对于您的计算机的 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/ 的地方删除它,然后留下 /

    希望我没有错过重点。

    【讨论】:

      猜你喜欢
      • 2014-02-12
      • 1970-01-01
      • 2017-10-22
      • 2014-09-22
      • 2012-11-24
      • 1970-01-01
      • 2020-06-05
      相关资源
      最近更新 更多