API Forismatic JSON: Random Quote Machine

Question

Obecnie buduję maszynę do cytowania za pomocą forismatic API i jestem kompletnie zakłopotany. Mój program działał dobrze, dopóki nie zdecydowałem się wrócić do mojej pracy w przyszłości. Oto mój kod:

var html = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?"; 
 

 
var getQuote=function(data){ 
 
    if(data.quoteAuthor === "") { 
 
    data.quoteAuthor = "Unknown"; 
 
    }  
 
    $('#author').text(data.quoteAuthor); 
 
    $('#text').text(data.quoteText); 
 
    
 
    var quote = 'https://twitter.com/intent/tweet?text=' + "\"" + data.quoteText + "\"" + ' Author: ' + data.quoteAuthor +' @Gil_Skates'; 
 

 
    $('#tweet').attr("href", quote); 
 
}; 
 

 
$(document).ready(function() { 
 
    $.getJSON(html, getQuote, 'jsonp'); 
 
}); 
 
    
 
// On button click 
 
$('#new-quote').on("click", function(){ 
 
    // Deletes text and creates spinner 
 
    $('#text').text(""); 
 
    $('#author').text(""); 
 
    $('<span style = "margin-left:200px" class="fa-li fa fa-spinner fa-spin"/>').appendTo('#text'); 
 
    
 
    // Calls our random quote 
 
    $.getJSON(html, getQuote, 'jsonp'); 
 
}); 
 

 
// Tweet popup 
 
window.twttr = (function(d, s, id) { 
 
    var js, fjs = d.getElementsByTagName(s)[0], 
 
    t = window.twttr || {}; 
 
    if (d.getElementById(id)) return t; 
 
    js = d.createElement(s); 
 
    js.id = id; 
 
    js.src = "https://platform.twitter.com/widgets.js"; 
 
    fjs.parentNode.insertBefore(js, fjs); 
 
    
 
    t._e = []; 
 
    t.ready = function(f) { 
 
    t._e.push(f); 
 
    }; 
 
    
 
    return t; 
 
}(document, "script", "twitter-wjs"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class = "quote-box centered"> 
 
    <div class = "quote-text"> 
 
     <i class="fa fa-quote-left"></i><span id = "text" >Quotes inspire<span> 
 
    </div> 
 
    <div class = "quote-author"> 
 
    <span id = "author">Programmer</span> 
 
    </div> 
 
    
 
    <div class = "buttons"> 
 
    <a class="button" href="https://twitter.com/intent/tweet" data-size="large" id="tweet" title="Tweet this now!" target="_blank"> 
 
     <i class = "fa fa-twitter"></i> 
 
    </a> 
 
    
 
    <!--<a class="button" id="tumblr" title="Share on Tumblr!" target="_blank"> 
 
     <i class = "fa fa-tumblr"></i> 
 
    </a>--> 
 
    
 
    <button class = "button" id ="new-quote">New Quote</button> 
 
    </div> 
 
</div>

Co robię źle? Stworzyłem zmienną do przechowywania mojego adresu URL, stworzyłem funkcję, która pobiera dane, i wykorzystałem getJSON do wykorzystania mojej funkcji. (Przepraszam za moją terminologię)

Działa, gdy uruchomię go na tej stronie, ale na: https://codepen.io/gilioo/pen/JKpjgr nie generuje on oferty.

Każda pomoc jest doceniana.

Answer 1

Uważam, że jest to kwestia współdzielenia zasobów (CORS), dostęp do codepen.io przez https, ale forismatic API jest oferowany tylko przez http afaik. Możesz spróbować http://codepen.io i sprawdzić, czy to działa. Wpadłem sam na ten sam problem, próbując użyć API przez https.