如何在浏览器中调试“混合内容”错误？

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: 只留下 // ）。