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

NZMAI

我正在用Codepen开发一个项目(对我来说,这是一个大项目,对初学者而言)。因此,我决定在https://www.dirtymarkup.com/中对其进行一些清理,然后将整理好的代码粘贴回Codepen中。但是,执行完该步骤后,我的代码被破坏了,并在console.log中显示了许多错误。如果需要,请查看控制台。

在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;
    }
}

Java脚本

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.
巴图斯

您收到的控制台错误与他们所说的完全一样,即“混合内容”错误。您正在通过HTTPS加载codepen页面,但是错误名称中的资源是通过HTTP加载的。您可以将这些资源的URL更改为HTTPS url(将http://更改为https://),或者完全删除协议名称,使浏览器能够选择要使用的协议(删除http:仅保留//)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在浏览器中调试angularjs的$ rootScope对象

如何在浏览器中调试Jest测试?

如何在Chrome浏览器中调试AngularJS

调用 App Engine 柔性环境 API 时如何停止混合内容浏览器错误?

如何在浏览器的调试器中调试动态加载的JavaScript(使用jQuery)?

如何在Google Chrome浏览器中启动JavaScript调试器?

如何在Google Chrome浏览器中激活JavaScript调试器?

如何在Mac OS的浏览器(Chrome,Opera,FF)中启用混合内容(不安全模式)以进行本地开发?

如何在chrome浏览器中调试nativescript应用并在chrome中查看输出

如何在闪亮的浏览器模式下调试ggplot?

如何在Chrome浏览器中触发deviceready事件(尝试调试phonegap项目)

CSS-如何在Google Chrome浏览器中调试活动/选定的输入元素

如何在浏览器中查看 docker 服务器内容

如何在浏览器中记录错误(错误视图)而不是React中的空白屏幕

脚本运行时如何在浏览器中输出内容?

如何在Firefox和Chrome等流行的浏览器中禁用HTML5内容?

如何在bash中列出来自特定浏览器的下载内容?

如何在Vue cli中的浏览器后退按钮上进行分页和内容呈现?

页面加载期间如何在浏览器中显示任何内容

如何替换显示:浏览器Edge中的内容

如何在cshtml ASP.NET Core中调试JavaScript脚本(通过使用Chrome浏览器或Visual Studio 2019)?

如何在Flask框架上的浏览器中显示所有错误?

如何在浏览器中在线查看PHP或Apache错误日志?

Visual Studio代码扩展:如何在浏览器中向文件添加错误标记?

如何在Android Auto的媒体浏览器中更新默认错误文本?

如何找出/调试将JavaScript加载到浏览器的内容

我正在pyqt5中制作浏览器,但不知道如何在浏览器中放置网站内容

如何忽略谷歌浏览器中的这个错误?

从浏览器中拖动选定的内容