Question

我的网站没有加载所有内容。这是它在CodePen上的样子：https://codepen.io/ArchivalBoat50/full/mWjRqK/

但这实际上是这样的： https://archivalboat50.github.io/marsproject/intro/

我检查了控制台，它说它有一个HTTPS错误

这是我的代码：

＆＃13;

$(document).ready(function() {
  setTimeout(function() {
    $('.alpha').addClass('in');
  },1000)
   $(".main-button").click(function(event) {
     this.style.transform = "rotate(360deg)";
     
   })
})

＆＃13;

@font-face {
  font-family: 'agency';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}


html {
  font-size: 20px
}
body {
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  background-image: url("http://www.newforestobservatory.com/wordpress/wp-content/gallery/starclusters/m56_hsiii_nfo.jpg")
}
.alpha {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'agency';
  text-transform: uppercase;
  color: #fff;
  font-weight: 100;
  font-size: 5em;
  transform-origin: center center;
  transform: translate3d(-50%,-50%,0)scale(1.4);
  opacity: 0;
  transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  white-space: nowrap;
  &.in {
    transform: translate3d(-50%,-50%,0)scale(1);
    letter-spacing: 0.1em;
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
  }
}

red-highlight {
  background-color: rgba(255,0,3,0.3);
}

.mars {
  width: 75%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  animation: mars 30s infinite linear;
}
@keyframes mars {
  0% {
    transform: translate(-50%, 0)rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0)rotate(360deg);
  }
}

.center-element {
  text-align: center;
}

.main-button {
padding: 17px;
background-color: rgba(0, 0, 0,0);
border: 3px solid white;
color: white;
font-weight: bold;
font-size: 16px;
transition: background-color 0.5s, color .5s, transform 1s
}

.main-button:hover {
  background-color: white;
  color: black;
  // transform: rotate(5deg)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alpha ">  
<h1>
  Welcome to  <span style="background-color:red;">Mars</span>
  </h1>
 <div class="center-element"> 
<a href="https://archivalboat50.github.io/allpagesDavidsGMO/">
  <a href="https://codepen.io/ArchivalBoat50/full/gmQyZQ/" target="_blank"><button type ="button" class= "main-button">CLICK TO BEGIN AN AWESOME JOURNEY</button></a>
   </a>
  </div>
</div>
  <img class="mars" src="http://now.space/wp-content/themes/twentyfifteen/images/planets/mars.png" alt="" />

＆＃13;

我该如何解决这个问题？

Answer 1

如果您查看实际网站上的控制台，您会看到有关尝试通过http加载不安全脚本的错误，由于此错误，jquery永远不会被拉入您的网站，这意味着它一旦尝试就会中断运行一些jquery代码。

它在codepen中起作用，因为它们已经从与它们相同的协议上的源中提取它。

Answer 2

您的错误：

混合内容：“https://archivalboat50.github.io/marsproject/intro/”页面是通过HTTPS加载的，但是请求了一个不安全的脚本“http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”。此请求已被阻止;内容必须通过HTTPS提供。

只需将您的脚本包含在：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

让服务器选择协议。这将解决另一个错误：

未捕获的ReferenceError：$未定义

CSS中有多处错误，如：

CORS策略阻止了对来自'null''的'https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff'字体的访问：“Access-Control-Allow-Origin”标题的值为“https://s.codepen.io”，而不是等于提供的原产地。因此，不允许原点'null'访问。

即使您将它们作为HTTPS包含在内，您仍然违反了CORS政策。您最好在您的网站上下载这些字体以避免这种情况。

现在关于警告：你有两个：

混合内容：“https://archivalboat50.github.io/marsproject/intro/”页面是通过HTTPS加载的，但请求的是不安全的图片“http://now.space/wp-content/themes/twentyfifteen/images/planets/mars.png”。此内容也应通过HTTPS提供。

和

混合内容：“https://archivalboat50.github.io/marsproject/intro/”页面是通过HTTPS加载的，但请求的是不安全的图片“http://www.newforestobservatory.com/wordpress/wp-content/gallery/starclusters/m56_hsiii_nfo.jpg”。此内容也应通过HTTPS提供。

虽然没有错误，但我建议将这些图片放在您的网站上，因为图片的原始来源无法提供安全连接。

Answer 3

您应该将所有链接设为https而不是http，Chrome真的很讨厌混合内容。简单的解决方案：在任何地方都可以将http更改为https。

网站没有加载一切

3 个答案: