2014-01-29 5 views
0

Я новичок, и я не знаю много о javascript. Все, что я знаю, это следующие загрузки страниц/кода в Safari и Explorer, но не в Chrome или Firefox. Может ли кто-нибудь указать на недостающий код или конкретные ошибки? Очень признателен. Вот эта страница: https://dl.dropboxusercontent.com/u/9832487/Timeline/timeline2.htmlJavascript не работает в Chrome или Firefox

<!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> 

ответ

1

Вы используете HTTP на JavaScripts, но ваш сайт по протоколу HTTPS (смешанное содержание). поэтому по умолчанию хром и firefox блокируют его. вам необходимо разблокировать его в пути, который я показал в образе еще изменить URL'ы на JQuery, как показано ниже:

<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 файл в самой раздаточной и обеспечить относительную ссылку ,

проверка ниже изображения, если вы хотите, чтобы разблокировать его с существующим кодом

enter image description here

1

Ты сайт защищен (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 блокируют запуск сценария, потому что считаются mixed content. Если обеспечить безопасную версию этих файлов сценария он должен работать:

<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> 
0

Вы еще не проверили ваш код в браузере, но с первого взгляда, я думаю, что тег в голове должен быть закрыт. Также вы должны переместить тег JavaScript-фрагмента, находящийся за пределами внутренней части. Я думаю, это исправит. Также вы должны использовать консоль хром, чтобы проверить, не вызывает ли она какие-либо ошибки. Вы должны использовать инструкцию console.log() или alert(), чтобы проверить, способен ли хром анализировать содержимое javascript.

Смежные вопросы