我的报价生成器可在移动设备上使用，但不能在台式机上使用

Question

就像标题说的那样。 我已经完成了FCC挑战报价生成器。 直到今天早上在所有平台上都可以正常工作，现在只能在移动设备上使用。 不知道是什么原因造成的。 任何指针将不胜感激。

链接到Codepen： https ://codepen.io/Skitto/pen/dOrXNy HTML

<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://use.fontawesome.com/225c9ed469.js"></script>
</head>
<body>
<div class="background outerswag">

 <div class="box">

  <div class="text-center">

      <h2 id="quote"> Welcome to the quote generator, enjoy your stay.</h2>
      <h4 id="author"></h4>


  </div>

  <div class = "text-center">
    <button id = "quoteGETJSON" class = "btn btn-primary btn-lg outline glyphicon glyphicon-repeat" onclick="this.blur();"></button>
    <button id = "tweet" class = "btn btn-primary btn-lg outline fa fa-twitter" onclick="this.blur();"></button>
    <h5>created by Skitto</h5>
    </div>


  </div>
  </div>
</div>
</body>

CSS

    html{
  background:url("https://source.unsplash.com/category/nature/1920x1080")no-repeat center center fixed;

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.box{
    padding:10%;
    color:white;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 30%;
    width: 100%;

}
.text{
  max-width:50%;
} 
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 16px;
}

.btn-lg {
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-primary {
  color: white;
  background-color: white;
  border-color: white;
}

.btn-primary:hover,
.open .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: grey;
  border-color: grey;
}

/***********************
  OUTLINE BUTTONS
************************/

.btn.outline {
    background: none;
    padding: 12px 22px;
}
.btn-primary.outline {
    border: 2px solid white;
    color: white;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .open > .dropdown-toggle.btn-primary {
    color: black;
    border-color: black;
}

/***********************
  CUSTON BTN VALUES
************************/

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn:focus{
    outline: 0 none;
}

Java脚本

var authorglobal="";
var quoteglobal="";
$('#quoteGETJSON').click(function() {
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?")
    .done(update)
    .fail(handleErr);
});


function update(quote) {
  $('#quote').html(JSON.stringify(quote.quoteText));
  quoteglobal=JSON.stringify(quote.quoteText);
  if(quote.quoteAuthor==""){
    $('#author').html('-Unknown');
    authorglobal="-Uknown";
  }else{
    var string="-";
       string+= JSON.stringify(quote.quoteAuthor);
      var returnable=string.replace(/"/g,"");
      authorglobal=returnable;
  $('#author').html(returnable);
  }
 //$('html').css('background', 'url(hre)');
}

function handleErr(jqxhr, textStatus, err) {
  console.log("Request Failed: " + textStatus + ", " + err);
}

$('#tweet').click(function(){
  var url="https://twitter.com/intent/tweet?hashtags=quotes&text="+quoteglobal+authorglobal;

  window.open(url) ;
});

Answer 1

它无法正常工作的原因是您的密码笔网址为https，但您请求的是http资源。 有混合内容错误

如果您通过http打开codepen，它将起作用： http ://codepen.io/Skitto/pen/dOrXNy

您应该对所有资源使用相同的协议。 您还可以指定网址，例如：“ // google.com”，该网址将设置与当前页面使用的协议相同的协议。 对于您的情况是：

$.getJSON("//api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?")

但是在您的代码笔中设置它并通过https运行它不起作用，因为存在证书错误api.forismatic.com

骇客入侵！