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>

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

全局JS var没有被看到

2 个答案: