Bootstrap - Carousel Jumbotron - 带有 WebGL 内容的 iframe

Question

这个问题很具体，但我还是会问。

首先，我知道 iframe 可能不是最好的设计，但我不知道如何解决我的问题。无论如何，让我从一些背景信息开始：​​

我有一个包含一些 WebGL 内容的页面（它只是使用 Three.js 加载一个 .obj 和 .mtl 模型，并添加了一些用于相机移动的键盘导航）。

这个页面的结构是它使用 php 的 $_GET 数组获取一个变量，然后根据该变量加载模型（如果变量是“Bus”，那么它将从 obj/Bus/Bus.obj 加载，并且如果变量是“Shoe”，那么它将从 obj/Shoe/Shoe.obj 加载。

页面的链接类似于“browser.php?name=Bus”或“browser.php?name=Shoe”。

现在，我想在 iframe 的轮播中显示其中的几个页面。因为我使用的是 Bootstrap，所以使用以下代码可以轻松完成这项任务：

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <iframe src="browser.php?name=Bus" height="500" width="500">
      <div class="container">
        <div class="carousel-caption">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>              
          <br />
          <br />
        </div>
      </div>
    </div>

    <div class="item">
      <iframe src="browser.php?name=Shoe" height="500" width="500">
      <div class="container">
        <div class="carousel-caption">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>              
          <br />
          <br />
        </div>
      </div>
    </div>
  </div>
</div><!-- /.carousel -->

除了一个问题，轮播标题及其所有内容都没有显示之外，这一切都很好。我不确定这是因为 iframe，还是因为 WebGL 内容，因为当我在那里有一张图片时，它的内容正在显示。

WebGL iframe 轮播：

普通图片轮播：

最后，我的问题是：如何修复我的代码/组织/设计，以便我可以在轮播中显示 WebGL 内容？

对不起，如果这是重复的，但我无法在谷歌上找到任何相关链接。

感谢您抽出宝贵时间阅读/可能回答此问题， 布科

[编辑]： 我才意识到我的问题措辞很糟糕，而且不够清楚。我的主要问题是导航箭头没有出现在 WebGL 内容轮播中（参见图片）。如何修复我的设计/代码，以便我可以在带有导航箭头的轮播中显示 WebGL 内容？

Answer 1

我看到的唯一明显的事情是<iframe>s 缺少它们的结束标签，这实际上是 W3C (http://www.w3.org/TR/html-markup/iframe.html#iframe-tags) 所要求的。

我假设<iframe> 的正常行为正在发挥作用，这意味着只有在无法加载src 时才会显示<iframe> 的任何子项。或者，换一种说法：缺少结束标记，看起来您的导航元素被视为“后备”内容而不是兄弟元素。

事实上，将您的内容加载到 jsFiddle 似乎证明了我的正确性： http://jsfiddle.net/dRtvH/ - 没有结束标签，没有轮播，但只需关闭 <iframe>s 即可制作导航按钮出现。