Javascript ASP.NET页面，加载google图表和threejs有时不起作用_Javascript_Jquery_Asp.net_Three.js_Google Visualization

Javascript ASP.NET页面，加载google图表和threejs有时不起作用

javascript jquery asp.net three.js google-visualization

Javascript ASP.NET页面，加载google图表和threejs有时不起作用,javascript,jquery,asp.net,three.js,google-visualization,Javascript,Jquery,Asp.net,Three.js,Google Visualization,我正在编写一个ASP.NET页面，加载3个数据数组X、Y、Z轴，并在三维动画和二维折线图中显示它们为此，我使用了ThreeJS和Google图表我的页面作为父页面的IFrame打开。每次在Chrome上都可以正常工作。在IE和Firefox中，第一次都可以很好地工作，但是如果我关闭然后重新打开IFrame，我的页面没有正确加载：div没有以正确的方式定位，3D动画被渲染但没有旋转我放置了一个重置按钮，以测试问题是否在代码中，或者在加载过程中发生了什么我的重置按钮工作！事实上，单击后，

我正在编写一个ASP.NET页面，加载3个数据数组X、Y、Z轴，并在三维动画和二维折线图中显示它们

为此，我使用了ThreeJS和Google图表

我的页面作为父页面的IFrame打开。每次在Chrome上都可以正常工作。在IE和Firefox中，第一次都可以很好地工作，但是如果我关闭然后重新打开IFrame，我的页面没有正确加载：div没有以正确的方式定位，3D动画被渲染但没有旋转

我放置了一个重置按钮，以测试问题是否在代码中，或者在加载过程中发生了什么

我的重置按钮工作！事实上，单击后，所有内容都位于wright位置，动画将旋转

我搜索了很多，发现document.ready和google.load函数之间存在一些冲突或相似之处。。。我几乎什么都试过了，但还是不起作用

这里有一些代码可以更好地解释：

<head>
[...]
<script type="text/javascript" src="../Js/three.min.js"></script>
<script type="text/javascript" src="../Js/TrackballControls.js"></script>
<script type="text/javascript" src="../Js/font/helvetiker_regular.typeface.js"></script>
<script type="text/javascript" src="../Js/jquery-1.js"></script>
<script type="text/javascript" src="../Js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("visualization", "1", { packages: ["corechart"] });  </script>
[...]

<script type="text/javascript">
$(document).ready(function () {
    //here I initialize my 3D object

    resetPositions();
});

function resetPositions() {
    $('#graph2DLineChart').css('position', 'absolute');
    $('#graph2DLineChart').css('top', '253px');
    $('#graph2DLineChart').css('left', '652px');
    $('#graph2DLineChart').css('background-color', '#ffffff');
    $('#graph2DLineChart').css('color', '#000000');
    $('#graph2DLineChart').css('width', '280px');
    $('#graph2DLineChart').css('height', '300px');
    $('#graph2DLineChart').css('z-index', '50');
    $('#graph3DContainer').css('position', 'relative');
    $('#graph3DContainer').css('top', '0px');
    $('#graph3DContainer').css('left', '0px');
    $('#graph3DContainer').css('background-color', '#333F47');
    $('#graph3DContainer').css('color', '#ffffff');
    $('#graph3DContainer').css('width', '906px');
    $('#graph3DContainer').css('height', '670px');
    $('#graph3DContainer').css('z-index', '1');
    WIDTH = 906;
    HEIGHT = 670;
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
    renderer.setSize(WIDTH, HEIGHT);
    controls.handleResize();

    drawChart();
}
[...]
</script>
</head>
<body>
[...]
<input type="button" id="resetButton" class="btncontrol" value="Reset positions" onclick="resetPositions();" />

这个解决方案每次都有效！！！！但我真的很讨厌它。。。请问是否有其他方法确保页面完全加载

非常感谢

好吧，我改变了我的观点。。。答案是setTimeoutfn，500的作用

如本文所述：

setTimeout将新事件添加到浏览器事件队列和渲染引擎已在该队列中（不完全为真），但足够近，以便在setTimeout事件之前执行 David Mulder 4'12年6月14:30

因此，我以这种方式更改了代码：

$(document).ready(function () {

//here I initialize my 3D object

setTimeout(function () {
        resetPositions();
    }, 0);

});

什么都没变…：

我有点疯了…

Document ready可能在加载可视化API之前启动，所以当您尝试绘制图表时，它失败了，因为API没有加载。您应该去掉document ready事件处理程序，并将resetPositions函数移动到google loader回调：

google.load("visualization", "1", { packages: ["corechart"], callback: resetPositions });

你的$document.ready需要结束，顺便说一句。谢谢安迪，我已经更正了我的帖子。在我的页面中，所有括号都可以，只是复制粘贴错误。对不起，你是对的！谷歌图表和往常一样呈现良好。3D效果很好。但是三维动画不起作用，div未放置在正确的位置。与以前一样。我也尝试不使用JQuery，可能是没有完全加载，而是替换为GetDocumentObjId，但行为仍然相同

google.load("visualization", "1", { packages: ["corechart"], callback: resetPositions });