Javascript無法在Chrome或Firefox中使用

Question

我是新手，我不太了解javascript。 我所知道的是在Safari和資源管理器中加載了以下頁面/代碼，但在Chrome或Firefox中沒有。 任何人都可以指出任何丟失的代碼或特定的錯誤？ 非常感激。 這是實際頁面： https ： //dl.dropboxusercontent.com/u/9832487/Timeline/timeline2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link REL="SHORTCUT ICON" HREF="UVALogo.ico">
            <title>SS Timeline Tool</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
            <style type="text/css">
            body { font-family:Verdana,Geneva,sans-serif; font-size:xx-small; }
            .rounded-corners { -moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;}
            .shadedback { background-color:#eee;border-radius:8px;
                background:-moz-linear-gradient(top,#f0f0f0,#dfdfdf);
                background:-webkit-linear-gradient(top, #f0f0f0 0%, #dfdfdf 100%);
                border-collapse: collapse;
                }
            </style>
</head>

        <body>
            <div id="surfaceDiv" style="position:absolute;left:29%;width:68%;padding:1%" class="rounded-corners"></div>
            <div id="picBinDiv" style="position:absolute;left:1%;width:25%;padding:1%" class="shadedback"></div>              

        </body>
    </html>

    <script>

    // SETUP

    var picWidth=0;                                                 // Width of pics (use 0 to disable)
    var picHeight=96;                                               // Height of pics(use 0 to disable)
    var backPic="background.jpg";                                                   // URL to back surface picture (if any)
            var pics=["https://dl.dropboxusercontent.com/u/9832487/Timeline/Images/cch.jpg",            // Each entry in array is a pic
    ];





    // ON LOAD

    $(document).ready(function() {                                  // When document is loaded
        var height=$(window).height();                              // Get height of window
        height=height*.9;                                           // Fill only 90% of window
        height=height+"px";                                         // Add pixel suffix
        $("#picBinDiv").css("height",height);                       // Set picBin height
        $("#surfaceDiv").css("height",height);                      // Set surface height
        AddPics(pics);                                              // Add pics to pic bin
        if (backPic)                                                // If a background pic spec'd
        {$("#surfaceDiv").append("<img src='"+backPic+"' height='"+height+"'/>");} // Add pic to div
        else                                                        // No back
        {$("#surfaceDiv").css("border","1px solid #999");}      // Add border
        });

    // ADD PICS

    function AddPics(picArray)                                  // ADD PICS TO PIC BIN
{
    var i,picHtml;
    var n=picArray.length;                                      // Number of pics to load
    for (var i=0;i<n;++i) {                                     // For each pic to load
    picHtml="<img src='"+picArray[i]+"' ";                  // Add tag and url
    picHtml+="id='pic"+i+"' ";                              // Add id
    if (picHeight)                                          // If height spec'd
    picHtml+="height='"+picHeight+"px'";                // Scale by height
    else if (picWidth)                                      // If a width spec'd
    picHtml+="width='"+picWidth+"px'";                  // Scale by width
    picHtml+="> ";                                          // Add close tag and space
    $("#picBinDiv").append(picHtml);                        // Add pic to div
    $("#pic"+i).draggable();                                // Make it draggable
    }

    }

    </script>

Answer 1

您正在javascripts上使用http，但您的網站是https（混合內容）。 所以默認情況下chrome和firefox會阻止它。 你需要以我在圖像中顯示的方式解鎖它，否則更改jquery的URL如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

另一個解決方案是將jquery和jqueryui文件放在dropbox本身並提供相對鏈接。

如果要使用現有代碼取消阻止，請檢查下面的圖像

在此輸入圖像描述

Answer 2

您的站點是安全的（ https ），但腳本被稱為不安全（ http ）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

所以Chrome和FF阻止腳本運行，因為它們被認為是混合內容。 如果您提供這些腳本文件的安全版本，它應該工作：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Answer 3

尚未在瀏覽器中檢查您的代碼，但從第一眼看，我認為必須關閉頭中的標記。 此外，您應該移動當前在內部的JavaScript部分標記。我認為這將解決。 此外，您應該使用chrome控制台檢查它是否拋出任何錯誤。 您應該使用console.log（）或alert（）語句來檢查chrome是否能夠解析您的javascript內容。

Javascript無法在Chrome或Firefox中使用

問題描述

3 個解決方案

解決方案1
1 2014-01-29 14:30:12

解決方案2
1 2014-01-29 14:30:49

解決方案3
0 2014-01-29 14:36:01

Javascript無法在Chrome或Firefox中使用

問題描述

3 個解決方案

解決方案1 1 2014-01-29 14:30:12

解決方案2 1 2014-01-29 14:30:49

解決方案3 0 2014-01-29 14:36:01

解決方案1
1 2014-01-29 14:30:12

解決方案2
1 2014-01-29 14:30:49

解決方案3
0 2014-01-29 14:36:01