Question

我创建了一个引用生成器，它可以在Chrome开发人员工具打开的情况下正常工作，但在开发人员工具关闭时不会生成新的引用。我在CodePen中的项目就是这种情况。在我的计算机上，它会生成三次报价（生成报价按钮的前三次点击工作正常）然后停止工作。它在Safari中根本不起作用。为什么会这样？

我确信我的JavaScript也可以使用一些重构，任何帮助都会很棒。谢谢！

Link to CodePen Demo

HTML

<html>
<head>
    <title>Random Quote Generator</title>
    <link rel="stylesheet" type="text/css" href="css/quote.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:300italic,300' rel='stylesheet' type='text/css'>



</head>
<body>

    <div class="quote-container">
        <div class="quote" id="msg"></div>

    </div>
    <div class="button-container">
        <a href="#" id="button">Get Quote</a>
    </div>
    <div id="twtbtn"></div> 




<script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>
<script type="text/javascript" src="js/quote.js"></script>
</body>
</html>

CSS

body {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1437652010333-fbf2cd02a4f8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2330269f135faf1c33bf613b85d5f1df');
    background-size:     cover;              
    background-repeat:   no-repeat;
    background-position: center center; 
}

* {
    font-family: 'Lato', sans-serif;
}

.quote-container {
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

.quote {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    font-size: 48px;
    font-style: italic;
    color: white;
}

.button-container {
    margin: 30px auto 50px auto;
    text-align: center;
}

#button {
    border: 1px solid white;
    padding: 12px 30px;
    background: transparent;
    font-size: 18px;
    border-radius: 2px;
}

#button:hover {
    background-color: white;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: black;
};

的JavaScript

$(document).ready(function(){
     //get quote from random quote API
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      //append quote and author to document
      $(".quote").append(a[0].content + "<p>&mdash; " + a[0].title + "</p>")

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


      //insert tweet button
      insertTweetBtn();
    });
}); 

$("a").click(function(){
      //get quote from random quote API
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      //replace HTML with newly generated quote
      $(".quote").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>")
      //remove contents of tweet button div
      $("#twtbtn").empty();
      //insert new tweet button to grab newly generated quote
      insertTweetBtn();
    });
 }); 


function insertTweetBtn() {
    var msg = document.getElementById('msg').textContent;
    twttr.ready(function (twttr) {
            twttr.widgets.createShareButton(
                '',
                document.getElementById('twtbtn'),
                function (el) {
                    console.log("Button created.")
                },
                {
                    text: msg ,  
                }
            );
            twttr.events.bind('tweet', function (event) {
                console.log(event, event.target);
            });
        });

}

Answer 1

好的...所以我疯狂地想弄明白然后我去了jquery的getJSON文档。我不是100％关于JSONP，但事实上，当你将＆amp;回调添加到url..it时使用JSONP。所以我删除它，它在safari中运行良好。这是codepen

FIXED

以下是jquery的引用：

“如果URL包含字符串”callback =？“（或类似的，由服务器端API定义），请求将被视为JSONP。请参阅$ .ajax中jsonp数据类型的讨论（）了解更多细节。“

遗憾的是，这并没有解释为什么safari是唯一一个不起作用的...但是嘿，它解决了它：）

Chrome开发者工具打开时会出现问题

1 个答案: