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

【问题标题】：Something breaks when Chrome developer tools are open打开 Chrome 开发者工具时出现问题
【发布时间】：2016-06-23 10:54:25
【问题描述】：

我制作了一个报价生成器，它在 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);
            });
        });

}

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案1】：

好的...所以我疯狂地试图弄清楚然后我去了 jquery 的 getJSON 文档。我不是 100% 了解 JSONP，但就是这样，当您将 &callback 添加到 url 中时，它使用 JSONP。所以我删除了它，它在 safari 中效果很好。这是代码笔

FIXED

这是来自 jquery 的引用：

“如果 URL 包含字符串“callback=?”（或类似的，由服务器端 API 定义），则请求将被视为 JSONP。请参阅 $.ajax( ) 了解更多详情。”

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(a) {stuff}

不幸的是，这并不能解释为什么 safari 是唯一一个它不工作的...但是嘿，它修复了它：)

【讨论】：