0

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

首先，我知道 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 iframe 轮播

普通图像轮播： 普通图像轮播

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

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

感谢您花时间阅读/可能回答这个问题，Bucco

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

4

1 回答 1

1

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

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

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

于 2013-06-04T04:15:28.203 回答