看不到全局 JS 变量

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 "audio" 在文件顶部的单独 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>

我怀疑这会返回"未定义"或"null"。意味着您必须创建对象或通过该脚本以某种方式请求它。