我正在使用fullpage.js库创建一个个人网站,以使用它包含的幻灯片页面显示我的投资组合。我遇到的问题是一切正常,但一旦我FTP到我的gihub.io或其他公共域,我收到GET错误,从我的节点模块中找到适当的文件。路径指向正确的文件,但是当我使用开发人员工具时,我会一直收到相同的错误。我复制了下面的代码并遇到以下错误:
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js
index.html:6
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css
index.html:1
Mixed Content: The page at 'https://kghumaan.github.io/index.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
index.html:6
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.css
index.html:14
GET https://kghumaan.github.io/node_modules/fullpage.js/dist/jquery.fullPage.js 404 (Not Found)
index.html:25
Uncaught TypeError: $(...).fullpage is not a function
at HTMLDocument.<anonymous> (index.html:25)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)`
<html>
<head>
<!-- IMPORT JQUERY-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- FULL PAGE JS -->
<link rel="stylesheet" type="text/css" href="node_modules/fullpage.js/dist/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="node_modules/fullpage.js/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="node_modules/fullpage.js/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="node_modules/fullpage.js/dist/jquery.fullPage.js"></script>
<!-- FONT -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
navigationPosition: 'right',
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section" id="section1">
<h1 id="title" class="animated fadeInUp">NAME</h1>
<div id="buttons">
<div id="button1" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-file-o fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Resume
</div>
</div>
<div id="button2" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
LinkedIn
</div>
</div>
<div id="button3" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-github-alt fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Github
</div>
</div>
<div id="button4" class="animated fadeInUp">
<a href="#">
<span class="fa-stack fa-lg" id="hover">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-envelope-open-o fa-stack-1x"></i>
</span>
</a>
<br />
<div id="handle">
Email
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<p style="position: absolute; left: 10%; top: 3%; color: white; font-family: 'Quicksand', sans-serif; font-size: 120%;">Recent Work :</p>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInUp" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInRight" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInLeft" id="portfolioImage"/>
</a>
</div>
<div class="slide">
<a href="#">
<img src="..." class="animated fadeInRight" id="portfolioImage"/>
</a>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
您的服务器有HTTPS,并且您正在尝试从不安全的位置加载jQuery。这是不允许的。
要解决此问题,请更改此行:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
对此:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
问题应该消失。
答案 1 :(得分:0)
var client = new RestClient("");
var request = new RestRequest("delivery", Method.GET);
request.AddParameter("token", token);
IRestResponse response = client.Execute(request);
mDeliveries = JsonConvert.DeserializeObject<List<Delivery>>(response.Content);
通过在 <link rel="stylesheet" type="text/css" href="/node_modules/fullpage.js/dist/jquery.fullPage.css" />
<script src="/node_modules/fullpage.js/vendors/jquery.easings.min.js"></script>
之前添加正斜杠来使用相对路径。
答案 2 :(得分:0)
您正在加载Jquery两次(以及两个不同的版本),这可能会导致一些错误。