为什么 javascript 可以在我的网站上运行，但不能在本地运行答案

【问题标题】：why javascript works on my website, but not locally为什么 javascript 可以在我的网站上运行，但不能在本地运行
【发布时间】：2017-05-13 03:54:35
【问题描述】：

我有一个从该站点获得的 JavaScript 代码：http://www.micahcarrick.com/change-image-with-jquery.html 我只修改了图像的名称以使用我拥有的 .png 文件。问题是如果我在本地的网络浏览器中打开它，那么当我点击一个名为 django.gif 的缩略图时，我会被定向到实际图像，而不是用新图像替换另一个图像。但是，如果我将此 .html 脚本放在 Godaddy.com 网站上并使用相同的 Web 浏览器访问它，它确实可以像原始站点一样正常工作：http://www.micahcarrick.com/code/jquery-image-swap/index.html。我注意到，在我从作者那里得到的这段代码的网站上，提到“缩略图是指向图像全尺寸版本的链接。如果用户没有 JavaScript，链接仍然会指向大图像。”这是否意味着我没有 Java Script？我可以在本地运行其他简单的 JavaScript 代码。为什么当我将它放在网站上时它可以工作，但在本地测试时却不起作用，即使使用完全相同的 Web 浏览器也是如此？代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example: Change Image with jQuery</title>
  <style type="text/css">
    body { width: 600px; margin: auto; }
    #imageWrap { 
        width: 640px; 
        height: 420px; 
        background: url('ajax-loader.gif') center center no-repeat; 
    }
  </style>
  <script type="text/javascript" 
    src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').live("click", function() {
            $('#mainImage').hide();
            $('#imageWrap').css('background-image', "url('ajax-loader.gif')");
            var i = $('<img />').attr('src',this.href).load(function() {
                $('#mainImage').attr('src', i.attr('src'));
                $('#imageWrap').css('background-image', 'none');
                $('#mainImage').fadeIn();
            });
            return false; 
        });
    });
  </script>
</head>
<body>
  <h1>Example: Change Image with jQuery</h1>
  <p>
    Main image is replaced using jQuery when a thumbnail is clicked. See full 
    description at <a 
    href="http://www.micahcarrick.com/change-image-with-jquery.html">Change 
    Image with jQuery</a>
  </p>

  <a href="bidu.png" class="thumbnail"><img src="django.gif" 
    alt="Image 1"/></a>
  <a href="athex.png" class="thumbnail"><img src="django.gif" 
    alt="Thumbnail 2"/></a>

  <div id="imageWrap">
    <img src="bidu.png" alt="Main Image" id="mainImage"/>
  </div>

</body>
</html>

谢谢你，汤姆

【问题讨论】：

你需要一个 localhost 服务器来解析 jQuery src。试试http://ajax.googleapis.com...
.live() 已弃用。尝试改用.on() - 语法是一样的。

标签： javascript jquery html image src

【解决方案1】：

这里的这一行是导致您的问题的原因：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

URL 前面的“//”告诉浏览器使用与页面相同的协议，当在本地运行时，协议将是“file:”，浏览器将使用它来查看本地驱动器找到 jquery 库（它不会找到，从而破坏了页面）。要解决此问题，请在 URL 前添加“http:”或“https:”，使其看起来像

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

【解决方案2】：

我发现了两个问题。

1. jQuery 的script 标记src 属性将找不到正确的资源。在本地运行，此语法 (//ajax...) 将解析为 file:///ajax.googleapis.com/...，这不是 jQuery 所在的位置。尝试在其前面加上http:// 或https://。

2. 您正在使用已弃用的 jQuery 函数。 .live() 不在 1.6.2 版本中 - 您需要改用 .on()，如下所示：

$(".thumbnail").on("click",function() { ... });

应该可以的。

希望这会有所帮助。

【讨论】：

【解决方案3】：

更改脚本标签的 src 以包含 http: 协议

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"

【讨论】：

谢谢大家，我会接受最先出现的答案。