在 html 中引用外部 js 文件时出现问题答案

【问题标题】：Issue in referencing external js file inside html在 html 中引用外部 js 文件时出现问题
【发布时间】：2018-06-07 21:26:33
【问题描述】：

我正在尝试在我的 html 中引用外部 js 文件，如下所示，我错过了什么吗？饼图应该会出现，但我没有得到它。 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src

<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>

<div><span class="pie">1/5</span></div>

【问题讨论】：

打开控制台并阅读为您解释它的消息。

标签： javascript html

【解决方案1】：

您的代码有 4 个主要问题：

你没有在HTML文档<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>中调用jQuery，那必须在插件之前调用
您调用了两次插件：缩小版和未缩小版（如果可用，请始终请求缩小版，因为它更轻）
您通过HTTP 请求插件，而不是总是更好的HTTPS
您没有使用$(".pie").peity("pie") 调用文档中的函数

这是一个有效的 sn-p。

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>

<body>

<div>
  <span class="pie">1/5</span>
  <span class="pie">226/360</span>
  <span class="pie">0.52/1.561</span>
  <span class="pie">1,4</span>
  <span class="pie">226,134</span>
  <span class="pie">0.52,1.041</span>
  <span class="pie">1,2,3,2,2</span>
</div>

  <script>
    $(document).ready(function() {
      $(".pie").peity("pie");
    });  
  </script>

</body>
</html>

【讨论】：

【解决方案2】：

您的代码需要进行三处更改。

您需要包含 jQuery。
您需要在span 上调用peity() 函数。
您不必同时包含jquery.peity.js 和jquery.peity.min.js。包括其中任何一个就足够了。

参见下面的代码。

$(document).ready(function() {
  $("span.pie").peity("pie");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>

<div><span class="pie">1/5</span></div>

【讨论】：

感谢您指出我的错误。但我仍然没有得到结果。
你能运行上面的sn-p并得到结果吗？
是的。我可以在这里运行代码 sn-p。但是我的道场还不行。
他其实不需要在span上调用peity()函数，$(".pie").peity("pie")就够了
@NewBie 你能编辑你的问题并粘贴你的整个代码吗？

【解决方案3】：

看来你错过了 JavaScript sn-p 1.加载顺序应该改变，

<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
    <script type="text/javascript">
  $(document).ready(function() {
    $("span.pie").peity("pie");
  });
    </script>
  </head>
  <body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
 <body>
</html>

【讨论】：

【解决方案4】：

除了其他答案之外，您的 Dojo sn-p 无法正常工作，因为您正试图通过 HTTP 从通过 HTTPS 提供服务的页面加载 Peity 插件。 Your web browser console 会告诉你浏览器会阻止从 HTTPS 页面加载 mixed content。

从https://benpickles.github.io/peity/jquery.peity.js 加载peity.js。但是当您发布您的网站时，请下载peity.min.js 并将其托管在您自己的服务器上。 Github is not a CDN.

【讨论】：

很高兴知道！我会注意到这一点。但是我的虔诚，一个人，现在终于工作了dojo.telerik.com/uTikoB，这里我没有从 Github 获取 js 引用，而是直接从他们的托管站点 benpickles.github.io/peity 引用。