Question

我想使用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

问候， faiko

Answer 1

iframe加载了一个最初隐藏的状态，代码基本上从隐藏状态获得0x0维度。您可以选择加载选项卡单击或刷新框架。您可以看到，如果您转到http://korb.cwsurf.de/tmp/buildingdetail_simple.html#tabs-2，只有可见的正确渲染。

我会在这里What's the best way to reload / refresh an iframe using JavaScript?推荐如何重新加载iframe。

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

Answer 2

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

您可以尝试在显示标签后添加<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>。 “超时0”技巧只是延迟某些事情的一种方式，直到之后浏览器再次控制，并且应该在显示面板后添加<iframe> 。

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

jQuery选项卡菜单和WebGL

2 个答案: