如何在瀏覽器中調試「混合內容」錯誤？

Question

我正在開發一個codepen項目（作爲初學者，這對我來說是一個大型項目）。所以我決定在https://www.dirtymarkup.com/中清理一下，並將整理後的代碼粘貼回codepen中。然而，在那個過程之後，我的代碼被破壞，並在console.log中顯示一堆錯誤。如果你需要看看控制檯。

Project on codepen

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

<!--********** HEADER **********--> 

    <header class="navigation"> 
     <div class="icon"> 
      <span class="glyphicon glyphicon-align-justify" onclick= 
      "openNav()"></span> 
      <div id="headerText"> 
       Social Media 
      </div> 
     </div><!--icon div--> 
     <div id="textRandomQuote"> 
      Random Quote Project 2016 <span id="by">by</span> <span id= 
      "nzMai">NZ MAI</span> 
     </div> 
    </header><!--********** QUOTE SECTION **********--> 
    <section> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3 quoteDiv col-xs-12"> 
        <p id="quotes"></p><!--end of "quotes" p--> 
        <button class="btn btn-primary" id="getQuote" type= 
        "button">Get Quote</button> 
        <div class="like&share pull-right"> 
         <span class="glyphicon glyphicon-heart social-but" 
         data-placement="left" data-toggle="tooltip" title= 
         "Like the Quote"></span> <span class= 
         "glyphicon glyphicon-share" data-placement="left" 
         data-toggle="tooltip" title="Share the Quote"></span> 
         <span><i aria-hidden="true" class="fa fa-twitter" 
         data-placement="left" data-toggle="tooltip" title= 
         "Tweet the Quote"></i></span> 
        </div> 
       </div><!--end of "col-md-6 col-md-offset-3" div--> 
      </div><!--row--> 
      <div class="row"> 
       <div class= 
       "col-md-6 col-md-offset-3 col-xs-12 bioDivContainer"> 
        <h1 class="authorName"></h1> 
        <p class="bioDiv"></p> 
       </div> 
      </div><!--row--> 
     </div><!--end of container--> 
    </section> 
    <section class="articlesSection"> 
     <div class="container"> 
      <div class="row"> 
       <div id="wikiArticlesDiv"> 
        <h1 class="wikiArticlesHeader"></h1> 
        <ul class="wikiArticlesList"></ul> 
       </div> 
      </div> 
     </div> 
    </section><!--SIDE NAVIGATION--> 
    <div class="sidenav" id="mySidenav"> 
     <a class="closebtn" href="javascript:void(0)" onclick= 
     "closeNav()">&times;</a> <a href="#">About</a> <a href="#"><img alt= 
     "twitter" id="twitter" src= 
     "https://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png"></a> 
     <a href="#"><img alt="youtube" id="youtube" src= 
     "https://worldartsme.com/images/youtube-icon-clipart-1.jpg"></a> 
     <a href="#"><img alt="facebook" id="facebook" src= 
     "https://rocketfans.com/wp-content/uploads/2014/12/Buy-facebook-likes.png"> 
     </a> 
    </div><!-- Use any element to open the sidenav --> 
    <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page --> 

CSS

@import https://fonts.googleapis.com/css?family=Roboto; 

.navigation { 
    width: 100%; 
    height: 80px; 
    background-color: #e0f2f1; 
    box-shadow: 1px 5px 16px #aec0bf; 
} 

.icon { 
    display: inline; 
    width: 240px; 
    height: 100%; 
} 

.glyphicon-align-justify { 
    font-size: 30px; 
    margin-top: 20px; 
    margin-left: 20px; 
    margin-right: 0; 
} 

#headerText { 
    display: inline; 
    font-size: 24px; 
    margin-left: 10px; 
    border-right: 2px solid #000; 
    padding-right: 5px; 
    font-family: 'Roboto',sans-serif; 
    font-weight: 700; 
    opacity: .9; 
    color: #424242; 
} 

#textRandomQuote { 
    width: auto; 
    display: inline; 
    margin-left: 20px; 
    font-family: 'Roboto',sans-serif; 
    font-size: 18px; 
    font-weight: 700; 
    opacity: .75; 
} 

#by { 
    font-size: 12px; 
    font-family: 'Roboto',sans-serif; 
    opacity: .4; 
} 

#nzMai { 
    font-size: 18px; 
    font-family: 'Roboto',sans-serif; 
    border: 1px solid #424242; 
    padding: 10px; 
} 

.quoteDiv { 
    padding-bottom: 20px; 
    transition: all .7s ease; 
    background-color: #b2b2b2; 
    height: auto; 
    margin-top: 40px; 
    padding-top: 40px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
    background-image: repeating-linear-gradient(90deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-linear-gradient(180deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-radial-gradient(circle,#607D8B,#607D8B 45%,transparent 45%,transparent 60%,#607D8B 60%,#607D8B 100%); 
    background-size: 3px 3px; 
} 

.quoteDiv:hover { 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
    background-image: repeating-linear-gradient(45deg,transparent,transparent 50%,#9E9E9E 50%,#9E9E9E),repeating-linear-gradient(-45deg,transparent,transparent 50%,#424242 50%,#424242); 
    background-size: 50px 50px; 
} 

#quotes { 
    text-align: center; 
    font-family: 'Roboto',sans-serif; 
    font-size: 36px; 
    color: #FAFAFA; 
    text-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
} 

#getQuote { 
    text-align: center; 
} 

.bioDivContainer { 
    padding-bottom: 20px; 
    background-color: #ebf9fe; 
    height: auto; 
    margin-top: 40px; 
    padding-top: 40px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
} 

h1 { 
    text-align: center; 
    font-family: 'Roboto',sans-serif; 
    opacity: .9; 
    color: #424242; 
} 

.bioDiv { 
    font-family: 'Roboto',sans-serif; 
    opacity: .9; 
    color: #424242; 
    font-size: 18px; 
} 

.articlesSection { 
    margin-top: 45px; 
    height: auto; 
    background-color: #e0f2f1; 
    box-shadow: 1px 5px 16px #aec0bf; 
    margin-bottom: 45px; 
} 

#wikiArticlesDiv { 
    padding-top: 20px; 
    margin: 0 auto; 
    width: 60%; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    height: auto; 
    opacity: .9; 
    border: 2px solid #000; 
} 

.wikiArticlesHeader { 
    text-align: center; 
    font-family: 'Roboto',sans-serif; 
    opacity: .9; 
    color: #424242; 
} 

.wikiArticlesList { 
    padding-left: 0; 
} 

.articleItem { 
    list-style-type: none; 
    text-align: center; 
    font-size: 22px; 
    opacity: .8; 
} 

.shortInfo { 
    color: red; 
    display: block; 
    font-family: 'Roboto',sans-serif; 
    font-size: 18px; 
    opacity: .8; 
} 

.glyphicon-heart,.glyphicon-share,.fa-twitter { 
    font-size: 20px; 
    color: #337ab7; 
    cursor: pointer; 
    opacity: .8; 
} 

.active { 
    color: red; 
    opacity: .8; 
} 

/**********SIDE NAVIGATION****************/ 
/* The side navigation menu */ 
.sidenav { 
    height: 100%; 
/* 100% Full-height */ 
    width: 0; 
/* 0 width - change this with JavaScript */ 
    position: fixed; 
/* Stay in place */ 
    z-index: 1; 
/* Stay on top */ 
    top: 0; 
    left: 0; 
    background-color: #111; 
/* Black*/ 
    overflow-x: hidden; 
/* Disable horizontal scroll */ 
    padding-top: 60px; 
/* Place content 60px from the top */ 
    transition: .5s; 
/* 0.5 second transition effect to slide in the sidenav */ 
} 

/* The navigation menu links */ 
.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: .3s; 
} 

/* When you mouse over the navigation links, change their color */ 
.sidenav a:hover,.offcanvas a:focus { 
    color: #f1f1f1; 
} 

/* Position and style the close button (top right corner) */ 
.closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px !important; 
    margin-left: 50px; 
} 

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ 
#main { 
    transition: margin-left .5s; 
    padding: 20px; 
} 

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ 
@media screen and (max-height: 450px) { 
    .sidenav { 
     padding-top: 15px; 
    } 

    .sidenav a { 
     font-size: 18px; 
    } 
} 

a #twitter { 
    width: 60px; 
} 

a #youtube { 
    width: 60px; 
    padding-left: 0; 
} 

a #facebook { 
    width: 60px; 
    padding-left: 0; 
} 

@media all and (max-width: 1000px) { 
    #wikiArticlesDiv { 
     width: 90%; 
    } 
} 

@media all and (max-width: 800px) { 
    .wikiArticlesHeader { 
     font-size: 24px; 
    } 

    .authorName { 
     font-size: 24px; 
    } 

    #quotes { 
     font-size: 24px; 
    } 

    a { 
     font-size: 18px; 
    } 

    .shortInfo { 
     font-size: 16px; 
    } 

    .bioDiv { 
     font-size: 16px; 
    } 
} 

@media all and (max-width: 600px) { 
    #by,#nzMai { 
     display: none; 
    } 
} 

的Javascript

var randomQuoteGenerator = (function() { 
    //var foundArticle = "Ben Stein"; 
    ////////// 
    ///General 
    ////////// 
    var general = { 
     // The URL to the quote API 
     url: 'https://api.forismatic.com/api/1.0/', 
     // What to display as the author name if s/he's unknown 
     unknownAuthor: 'Unknown', 
     // Base URL for the tweet links generation 
     tweetURL: 'https://twitter.com/home?status=', 
     //wikiURL:'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback' 
    }; 
    ///////////// 
    ////DOM cache 
    ///////////// 
    var domCache = { 
     $quoteDiv: $('#quotes'), 
     $authorDiv: $('#author'), 
     $clickButton: $('#getQuote'), 
     $tweetButton: $('#tweetQuote'), 
     $bioDiv: $('.bioDiv'), 
     $authorName: $('.authorName'), 
     $wikiArticlesDivHeader: $('.wikiArticlesHeader'), 
     $wikiArticlesList: $('.wikiArticlesList'), 
     $wikiArticlesDiv: $('#wikiArticlesDiv') 
    }; 
    var getWikiAuthorBio = function(author) { 
      var url = 
       'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + 
       author + '&format=json&callback=wikiCalback' 
       ////////////// 
       //Wiki request 
       ///////////// 
      var wikirequest = function() { 
        $.ajax({ 
         url: url, 
         dataType: 'jsonp', 
         success: function(wikiData) { 
           // Fetch the biographical information 
           var bioName = wikiData[2][0]; 
           // Check if instead of bio there is a phrase "The article may refer to...." if so then change indices 
           if (bioName.indexOf(
            'may refer to') >= 0) { 
            bioName = wikiData[2][1]; 
           } else { 
            var bioName = wikiData[2][0]; 
           } 
           var wikiArcticles = wikiData[1]; 
           var wikiArticlesShortInfo = 
            wikiData[2] 
           domCache.$wikiArticlesList.html(
            ''); 
           var authorName = wikiData[0]; 
           if (authorName === "Unknown") { 
            console.log(
             "This is author's name " + 
             authorName); 
            $('.bioDiv').html(''); 
            $('.bioDiv').text(
             'No available information' 
            ); 
           } 
           for (var j = 0; j < wikiData.length; j++) { 
            var articleAuthor = 
             wikiData[1][j]; 
            var articleInfo = wikiData[ 
             2][j]; 
            var linkAuthor = wikiData[3] 
             [j]; 
            domCache.$wikiArticlesList.append(
             '<li class="articleItem">' + 
             '<span>' + 
             '<a href =' + 
             linkAuthor + 
             ' target="_blank" >' + 
             articleAuthor + 
             '</a>' + '</span>' + 
             '<span class="shortInfo">' + 
             articleInfo + 
             '</span>' + '</li>' 
            ); 
            // Check if some articles are undefined if so hide them 
            if (typeof articleAuthor === 
             "undefined") { 
             $('.articleItem').last() 
              .html(''); 
            } 
            if (articleInfo === "") { 
             $('.shortInfo').last().html(
              ''); 
            } 
            //console.log(j + " " + articleAuthor); 
            //console.log(j + " " + articleInfo); 
            //console.log(j + " " + linkAuthor); 
           } // end of for loop 
           // Short biography 
           console.log(wikiData); 
           console.log(wikiArcticles); 
           console.log(url); 
           domCache.$bioDiv.text(bioName); 
          } // end of success 
        }); 
       } // wikirequest 
      wikirequest(); 
     } 
     /////////////////////////////// 
     //Display the quote on the page 
     /////////////////////////////// 
    var displayQuote = function(quote, author) { 
     domCache.$quoteDiv.text(quote); 
     domCache.$authorDiv.text(author); 
     domCache.$authorName.text(author); 
     domCache.$bioDiv.text(getWikiAuthorBio(author)); 
    }; 
    ////////// 
    //getQuote 
    ///////// 
    var getQuote = function() { 
      $.ajax({ 
       url: general.url, 
       type: 'GET', 
       dataType: 'jsonp', 
       jsonpCallback: "saveQuote", 
       data: 'method=getQuote&format=jsonp&lang=en&jsonp=saveQuote', 
       success: function(data) { 
         if (!data.quoteAuthor) { 
          data.quoteAuthor = general.unknownAuthor; 
         } 
         var quote = data.quoteText; 
         var author = data.quoteAuthor; 
         displayQuote(quote, author); 
         var addon = 
          "'s Related Wikipedia Articles"; 
         domCache.$wikiArticlesDivHeader.text(
          author + addon) 
         console.log(data); 
        } // end of success 
      }); 
     } // get quote 
     //////////////////////////// 
     //get new quote by clicking 
     /////////////////////////// 
    var ul = function() { 
     domCache.$clickButton.on('click', getQuote); 
     domCache.$wikiArticlesList.html(""); 
    }; 
    var init = function() { 
     // Display a quote 
     getQuote(); 
     ul(); 
    }; 
    return { 
     init: init 
    }; 
})(); // end of self-invoking function "randomQuoteGenerator" 
////////// 
//function is ready 
/////////// 
$(document).ready(function() { 
    // Initialize the QuoteGenerator module 
    randomQuoteGenerator.init(); 
}); 
// SIDE NAVIGATION 
/* Set the width of the side navigation to 250px */ 
function openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
    } 
    /* Set the width of the side navigation to 0 */ 

function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
    /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */ 

function openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     document.getElementById("main").style.marginLeft = "250px"; 
    } 
    /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */ 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft = "0"; 
} 
$(".social-but").click(function() { 
    $(this).toggleClass("active"); 
}); 

個

錯誤控制檯

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS. 

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png'. This content should also be served over HTTPS. 

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://worldartsme.com/images/youtube-icon-clipart-1.jpg'. This content should also be served over HTTPS. 

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?callback=saveQuote&method=getQuote&format=jsonp&lang=en&jsonp=saveQuote&_=1470391383459'. This request has been blocked; the content must be served over HTTPS. 

Answer 1

您收到的控制檯錯誤正是他們說，他們是，混合內容錯誤。您正在通過HTTPS加載codepen頁面，但錯誤中指定的資源正在通過HTTP加載。您可以將這些資源的URL更改爲HTTPS URL（將http：//更改爲https：//），也可以完全刪除協議標識，以便瀏覽器選擇要使用的協議（刪除http：只留下//）。