Question

我在设置动画信息图表以加载网页时遇到问题，希望能提供一些帮助。

动画是在Adobe Edge中创建的，并嵌入在网页的iFrame中。它从json文件中提取数据，该文件位于与网页相同的目录中。

问题在所有浏览器中，我在控制台窗口中收到错误TypeError: dataModel is undefined，但在Chrome和IE中，我还有与json文件相关的错误Failed to load resource: the server responded with a status of 404 (Not Found)。 json文件无法在Chrome或IE中识别。我已对其进行了验证，并将脚本<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>包含在该页面的<head>标记中。

本地网页在Firefox和Safari中正确加载动画，但一旦在服务器上就会中断。

以下是相关网页的链接：http://westernstations.net/courses/crossrail/C110.html

JS代码

var dataModel;

$.getJSON( "stations.json", function( json ){
    dataModel = json;
});

var index = -1;

function handleClickEvent( id ){

    // Handle timeline trigger clicks
    showDetail(id);
}
// Expose to globally accessible scope
sym.setVariable("handleClickEvent", handleClickEvent);


/*****************************************************
 * Controller for data and view state
 */
var timeoutDelay = 500;

function setState( id, state ){

    var symbol = sym.getSymbol(id);
    if( symbol ){
        symbol.setVariable("selected", state); 
        symbol.play(state ? "rollover" : "rollout");
    }
}

function showDetail( id ){

    // Reset last timeline selection
    setState("Trigger"+index, false);

    // Save new selection
    index = id;

    // Select next timeline trigger
    setState("Trigger"+index, true);

    // Show details
    var data = dataModel[index];
    var anim = sym.getSymbol("DetailPanelAnimation");
    var details = anim.getSymbol("DetailPanel");
    if( details )
    {
         // Transition out
         if( anim.getPosition() > 0 ){
            anim.play("hide");
         }

    // Transition in with new data...
    setTimeout(function()
    {
        details.$("Caption").html(data.title);
        details.$("Details").html(data.text);
        anim.play("show");
    }, 
    timeoutDelay);
    }
}

作为js的新秀，任何帮助都会非常感激。

TypeError：在浏览器中加载动画时未定义dataModel

0 个答案: