Fulpage.js只在本地工作?

时间:2017-01-23 22:23:05

标签: javascript jquery html css fullpage.js

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

3 个答案:

答案 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两次(以及两个不同的版本),这可能会导致一些错误。