全球JS var無法看到

Question

我的公司買了一個時間線插件，它會在每個瀏覽器中引發錯誤。它仍然在Chrome和FireFox中工作，但完全在IE瀏覽器（v11）

JS錯誤必須處理一個全局變量（在audio.min.js中定義），它不會在後面的JS文件中看到jquery.timeline.js）。

在HTML頁面中的JS文件列與全局變量，第一JS文件，接着是其他JS文件，其中正在生成的錯誤，讓所有期待權。 不知道這是什麼原因？

<script type="text/javascript" src="/Timeline/js/jquery/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="/Timeline/js/audiojs/audio.min.js"></script> 
<script type="text/javascript" src="/Timeline/js/jquery.timeline.js"></script> 

這裏是導致該錯誤的行：

audio.prettyPaused = 0; 

的錯誤：

SCRIPT1028: Expected identifier, string or number 
    Unable to set property 'prettyPaused' of undefined or null reference 
    Uncaught TypeError: Cannot set property 'prettyPaused' of undefined 

的VAR「音頻「在單獨的JS文件（audio.min.js）中定義，位於文件頂部：

//SHARED VARIABLE TO INTERACT WITH VIDEO & PRETTYPHOTO 
var audio; 

這是在上下文中的行：

//HTML5 AUDIO PLAYER 
audiojs.events.ready(function() { 
    var as = audiojs.createAll({ 
     autoplay: true, 
     loop: true 
    }); 
    audio.prettyPaused = 0; 
}); 

更多的背景信息

//jquery.timeline.js 
jQuery(document).ready(function() { 
    jQuery.myTimeline(); 
}); 


(function($) { 

    // GLOBAL VARS 
    var preload, container, tl, vidRoll, imgRoll, readBt, viewport, images, milestones, content, bar, track, dragger, marksAmount, fadeInDelay; 


    // CLASS CONSTRUCTOR/INIT FUNCTION 
    $.myTimeline = function() { 


     //SETUP VARS 
     preload = $('.preload'); 
     container = $('#timeline_container'); 
     tl = $('#timeline'); 
     vidRoll = $('.video_rollover'); 
     imgRoll = $('.image_rollover'); 
     readBt = $('.readmore'); 
     viewport = $('#timeline .viewport'); 
     images = $('#timeline .viewport .images'); 
     milestones = $('#timeline .milestones'); 
     content = $('#timeline .milestones .content'); 
     bar = $('#timeline .scrollbar'); 
     track = $('#timeline .scrollbar .track'); 
     dragger = $('#timeline .scrollbar .track .dragger'); 
     marksAmount = $('.marks > div').length; 
     fadeInDelay = parseInt(tl.attr("data-fadeInDelay")); 


     //CONFIG ALL ELEMENTS SIZES AND POSITIONS BASED ON HTML ATTRIBS 
     container.css("width", tl.attr("data-width")); 
     container.css("height", tl.attr("data-height")); 
     images.css("width", tl.attr("data-imagesWidth")); 
     viewport.css("height", tl.attr("data-imagesHeight")); 
     content.css("width", tl.attr("data-contentWidth")); 
     milestones.css("height", tl.attr("data-contentHeight")); 
     bar.css("top", tl.attr("data-imagesHeight") - tl.attr("data-draggerHeight")); 
     track.css("height", tl.attr("data-draggerHeight")); 
     dragger.css("height", tl.attr("data-draggerHeight")); 


     //PRELOAD & GLOBAL FADE IN 
     preload.delay(fadeInDelay - 500).animate({ opacity:0 }, 500, 'easeOutQuad'); 
     container.delay(fadeInDelay).animate({ opacity:1 }, 1000, 'easeOutQuad'); 


     //HTML5 AUDIO PLAYER 
     audiojs.events.ready(function() { 
      var as = audiojs.createAll({ 
       autoplay: true, 
       loop: true 
      }); 
      audio.prettyPaused = 0; 
     }); 


     //PRETTYPHOTO LIGHTBOX GALLERY 
     $('a[data-rel]').each(function() { 
      $(this).attr('rel', $(this).data('rel')); 
     }); 
     $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false}); 


     //TIPSY - TOOLTIP 
     readBt.tipsy({ gravity: 'w', fade: true, offset: 5 }); 


     //IMAGE ROLLOVER ICON 
     imgRoll.append("<span></span>"); 
     imgRoll.hover(function(){ 
      $(this).children("span").stop(true, true).fadeIn(600); 
     },function(){ 
      $(this).children("span").stop(true, true).fadeOut(200); 
     }); 


     //VIDEO ROLLOVER ICON 
     vidRoll.append("<span></span>"); 
     vidRoll.hover(function(){ 
      $(this).children("span").stop(true, true).fadeIn(600); 
     },function(){ 
      $(this).children("span").stop(true, true).fadeOut(200); 
     }); 


     //VIDEO THUMB STOPS MUSIC ON CLICK (IF PLAYING) 
     vidRoll.click(function() { 
      if (audio.playing) { 
       audio.prettyPaused = 1; 
       audio.pause(); 
      } else { 
       audio.prettyPaused = 0; 
      } 
     }); 


     //START DRAG IMAGES FUNCTION 
     startDrag(images); 


     //SCROLLBAR MILESTONES MARKS 
     for (var i = 0; i < marksAmount; i++) { 
      current = $('#m'+i); 
      current.stop(true, true) 
       .delay(fadeInDelay + 500) 
       .animate({ left:current.attr("data-xpos"), opacity:1 }, 700 + 100*i, 'easeOutQuad') 
       .show() 
       .tipsy({ gravity: 's', fade: true, offset: 3, fallback: current.attr("data-label") }); 
     }; 


     //INIT SCROLLBAR 
     tl.tinyscrollbar({ 
      wheel: 20, 
      mouseWheel: tl.attr("data-mouseWheel"), 
      size: tl.attr("data-width"), 
      draggerWidth: tl.attr("data-draggerWidth") 
     }); 


    } // END OF CLASS CONSTRUCTOR 

Answer 1

var audio;定義它，但不會對其進行初始化。那就是問題所在。你所展示的任何東西都表明音頻實際上已經初始化了。我的猜想可能是audio和audiojs可能意圖是相同的東西，但這是一個基於你提供的猜測。

Answer 2

Unable to set property 'prettyPaused' of undefined or null reference意味着var audio還沒有被初始化，所以它可能是一個全局問題，或者只是未初始化。

你說它得到該腳本創建 - 非常好，下面添加代碼，以確保：

<script type="text/javascript" src="/Timeline/js/audiojs/audio.min.js"> 
    console.log(audio); 
</script> 

我懷疑那將返回「不確定」或「空」。意味着你必須創建該對象或通過該腳本以某種方式請求它。