如何调试“混合内容"浏览器中的错误? [英] How to debug "Mixed Content" errors in a browser?
本文介绍了如何调试“混合内容"浏览器中的错误?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在用Codepen开发一个项目(对我来说，这是一个大项目，对初学者而言).因此，我决定在 https://www.dirtymarkup.com/中对其进行清理，并粘贴整齐将代码返回到Codepen中.但是，执行完该步骤后，我的代码被破坏了，并在console.log中显示了许多错误.如果需要，请查看控制台.
I'm working on a project in codepen (it is large project for me as a beginner). So I decided to clean it up a little bit in https://www.dirtymarkup.com/ and pasted tidied code back in codepen. However after that procedure my code is broken and displays a bunch of errors in console.log. If you need look at console.
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()">×</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.
推荐答案
您收到的控制台错误与他们所说的完全一样，即混合内容"错误.您正在通过HTTPS加载codepen页面，但是错误名称中的资源是通过HTTP加载的.您可以将这些资源的URL更改为HTTPS url(将http://更改为https://)，或者完全删除协议名称，使浏览器能够选择要使用的协议(删除http:仅保留//).
The console errors you are receiving are exactly what they say they are, Mixed Content errors. You are loading the codepen page via HTTPS but the resources named in the errors are being loaded over HTTP. You can either change the URLs for those resources to HTTPS urls (alter http:// to https:// ) or remove the protocol designations entirely enabling the browser to pick which protocol to use ( remove http: leaving just the // ).
这篇关于如何调试“混合内容"浏览器中的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
