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 Carousel：

普通图像轮播： Normal image Carousel

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

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

感谢您花时间阅读/可能回答此问题，颊

[编辑]：我刚刚意识到我的问题措辞严厉，而且不够明确。我的主要问题是导航器箭头没有显示在WebGL内容轮播中（参见图像）。如何修复我的设计/代码，以便我可以使用导航箭头在旋转木马中显示WebGL内容？

Answer 1

我看到的唯一明显的事情是<iframe> s缺少结束标记，根据W3C（http://www.w3.org/TR/html-markup/iframe.html#iframe-tags）实际需要这些标记。

我认为<iframe>的正常行为正在进行，这意味着只有在无法加载<iframe>时才会显示src的所有子项。或者，换句话说：缺少结束标记，看起来你的导航元素被视为“后备”内容而不是兄弟元素。

事实上，将您的内容加载到jsFiddle似乎证明了我： http://jsfiddle.net/dRtvH/ - 没有结束标记，没有轮播，只是关闭<iframe> s使导航按钮显示。

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

1 个答案: