1

我想使用 jQuery UI 中的选项卡（来源： http: //jqueryui.com/demos/tabs/）在每个选项卡上使用 WebGL GLGE 显示 COLLADA dae 文件（来源：http ://www.glge.org/ ）。选项卡应根据 xml 文件动态生成。一切都按计划进行，只有 3D 对象的渲染不起作用。

我现在尝试了不同的方法，但它们都不起作用。结果每次都一样。3D COLLADA 对象仅在第一个选项卡上呈现。即使我使用基本和静态 document.write 语句而不从我的 xml 中检索数据，也只会显示第一页上的建筑物。

例如：

<div id="tabs">
  <div id="tabs-1">
     //ONLY THIS OBJECT IS RENDERED
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-2">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-3">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>

如果我使用 jQuery 选项卡中的 iframe，则会呈现多个 iframe。所以

<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<div id="tabs">
     //codehere
</div>

在选项卡上方带来三个渲染的 3D 对象。

希望你能理解我的问题并帮助我。

编辑： 我刚刚上传了上面的“简单”示例。你可以在下面看到它：http: //korb.cwsurf.de/tmp/buildingdetail_simple.html

问候，法科

4

2 回答 2

2

在他们知道如何处理自己之前，是否需要让<iframe>s 可见（或至少有非隐藏的父母）？我之前看到过不可见标签的奇怪大小和定位问题，也许你看到了类似的问题。

您可以在显示选项卡后尝试添加<iframe>s 。像这样的东西：

$('#tabs').tabs();
$('#tabs a:not(:first)').one('click', function() {
    var tab = this.href.replace(/.*#/, '#');
    setTimeout(function() {
        // Add the appropriate <iframe> here.
        $(tab).append('<iframe src="..."></iframe>');
    }, 0);
});

这假设第一个已经打开（因此是:not(:first)）。使用one绑定单击处理程序将在第一次激活后取消绑定处理程序，因此您无需重新添加<iframe>s. “超时 0”技巧只是一种延迟某些东西直到浏览器再次控制并且应该在面板显示<iframe> 后添加的方法。

该技术的快速演示：http: //jsfiddle.net/ambiguous/FMBcE/

于 2012-01-13T01:48:14.530 回答
2

iframe 以初始隐藏状态加载，代码基本上从隐藏状态中获取 0x0 尺寸。您可以选择在选项卡单击或刷新框架时加载。您可以看到，如果您访问http://korb.cwsurf.de/tmp/buildingdetail_simple.html#tabs-2，则只有可见的才能正确渲染。

我会在这里推迟使用 JavaScript 重新加载/刷新 iframe 的最佳方法是什么？了解如何重新加载 iframe。

您可以从空白 href 开始，然后仅在单击选项卡时填充它。或全部渲染，然后在框架加载后调用选项卡。

于 2012-01-13T01:41:47.270 回答