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

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条评论
登录后参与评论

相关文章

来自分类Dev

如何在Chrome浏览器中调试AngularJS

来自分类Dev

如何在Chrome浏览器中调试AngularJS

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何阻止浏览器调用中的iframe内容

来自分类Dev

混合内容按浏览器版本划分

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何在Chrome浏览器和firefox浏览器中验证日期

来自分类Dev

如何在不是默认浏览器的Web浏览器中打开html文件?

来自分类Dev

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

来自分类Dev

如何在网络浏览器中获取“所见即所得”(打印所见内容)?

来自分类Dev

如何在没有文本区域或文本字段的浏览器中编辑网页内容?

来自分类Dev

如何在Android浏览器中打开pdf文件?

来自分类Dev

如何在浏览器堆栈中设置本地测试

来自分类Dev

您如何在浏览器中运行Jasmine测试?

来自分类Dev

如何在Spring Boot中启用浏览器缓存

来自分类Dev

如何在浏览器同步中配置端口

来自分类Dev

如何在Capybara和Selenium中打开浏览器

来自分类Dev

如何在移动浏览器中录制音频?

来自分类Dev

如何在AngularJS中关闭浏览器窗口

Related 相关文章

  1. 1

    如何在Chrome浏览器中调试AngularJS

  2. 2

    如何在Chrome浏览器中调试AngularJS

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

    如何阻止浏览器调用中的iframe内容

  13. 13

    混合内容按浏览器版本划分

  14. 14

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

  15. 15

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

  16. 16

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

  17. 17

    如何在Chrome浏览器和firefox浏览器中验证日期

  18. 18

    如何在不是默认浏览器的Web浏览器中打开html文件?

  19. 19

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

  20. 20

    如何在网络浏览器中获取“所见即所得”(打印所见内容)?

  21. 21

    如何在没有文本区域或文本字段的浏览器中编辑网页内容?

  22. 22

    如何在Android浏览器中打开pdf文件?

  23. 23

    如何在浏览器堆栈中设置本地测试

  24. 24

    您如何在浏览器中运行Jasmine测试?

  25. 25

    如何在Spring Boot中启用浏览器缓存

  26. 26

    如何在浏览器同步中配置端口

  27. 27

    如何在Capybara和Selenium中打开浏览器

  28. 28

    如何在移动浏览器中录制音频?

  29. 29

    如何在AngularJS中关闭浏览器窗口

热门标签

归档