在HTTPS页面上导入HTTP内容。处理混合内容

时间:2016-05-25 16:11:10

标签: javascript jquery html

我知道这类问题已被充分询问,而且我已找到触及主题的解决方案(例如:Dealing with HTTP content in HTTPS pages)。但是,我不确定如何在我的应用程序中实现它。

我试图在我的网站上从nfl.com导入XML文档(例如:http://www.nfl.com/ajax/scorestrip?season=2015&seasonType=REG&week=1),当然我收到此错误: Active mixed content error

据我所知,将http更改为https不起作用。那么,我如何将这些信息从nfl.com导入我的网页?

HTML code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <meta name="author" content="My Name">
    <!--Import Google Icon Font and Custom Icons-->
    <link href="https://rawgit.com/Templarian/MaterialDesign-Webfont/master/css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection">
</head>

<body>  
    <div id="main-content" class="container" style="width:auto;"></div>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
    <script type="text/javascript" src="initPicks.js"></script>
</body>
</html>

Javascript文件片段(initPicks):

$( document ).ready(function()
{
    var season = 2015;
    var week = 7;
    var url = 'http://www.nfl.com/ajax/scorestrip?season=' + season + '&seasonType=REG&week=' + week;
    $("#title").text("Week " + week);

    // set table and table header
    $("#main-content").html(
        '<table id="picks"><thead><tr>' +
        '<th data-field="date">Date</th>' + 
        '<th data-field="awayLogo">Away</th>' +
        '<th data-field="awayName"></th>' +
        '<th data-field="homeLogo">Home</th>' +
        '<th data-field="homeName"></th>' +
        '<th data-field="points">Assigned Points</th></thead></table>');

    //table body
    $("#picks").append('<tbody id="body"></tbody>');

    //import xml document from nfl.com
    $.get(url, function( data )
    {
        console.log(data);
    });
});

我为糟糕的编码道歉。我是HTML,jQuery,javascript(一般的Web开发)的新手。在此先感谢您的帮助。

0 个答案:

没有答案