2013-06-03 2 views
0

이 질문은 매우 구체적이지만 어쨌든 묻습니다.부트 스트랩 - 회전 목마 Jumbotron - WebGL 콘텐츠가있는 iframe

먼저 iframe은 아마도 최고의 디자인은 아니지만 다른 문제를 해결하는 방법을 모르겠습니다. 어쨌든 몇 가지 배경 정보로 시작하겠습니다.

WebGL 콘텐츠가 포함 된 페이지가 있습니다. Three.js를 사용하여 .obj 및 .mtl 모델을로드하고 카메라 이동을위한 키보드 탐색을 추가합니다. .

이 페이지는 PHP의 $ _GET 배열을 사용하여 변수를 가져온 다음이 변수를 기반으로 모델을로드하도록 구조화되어 있습니다 (변수가 "버스"이고 obj/Bus/Bus.obj에서로드하면, 변수가 "Shoe"이면 obj/Shoe/Shoe.obj에서로드합니다.

페이지 링크는 "browser.php? name = Bus"또는 "browser.php? name = Shoe"와 같습니다.

이제 iframe의 회전식 슬라이드에 이러한 페이지 중 몇 가지를 표시하고 싶습니다. 내가 부트 스트랩을 사용하고 있기 때문에,이 작업은 다음 코드를 사용하여 간단하다 :

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

일반 이미지 회전 목마 : 마지막으로 Normal image Carousel

, 내 질문 : 내 코드/조직/디자인 수정합니까 어떻게 회전 목마에서 WebGL이 콘텐츠를 표시 할 수 있도록 ?

죄송합니다. 중복되었지만 Google에서 관련 링크를 찾을 수 없습니다. 아마도 읽기 /이 질문에 대답하기 위해 시간을내어

덕분에, 부코

[편집] : 난 그냥 내 질문이 끔찍하게 표현되었다는 것을 깨달았다 충분히 밝혀지지 않았다. 내 주요 문제는 네비게이터 화살표가 WebGL 콘텐츠 회전식 컨베이어에 나타나지 않는 것입니다 (이미지 참조). 내비게이터 화살표가있는 회전 장치에 WebGL 콘텐츠를 표시 할 수 있도록 디자인/코드를 수정하려면 어떻게해야합니까?

+0

'browser.php' 페이지를 직접 요청하여 유효한 응답을 얻었습니까?콘솔에 오류가보고 되었습니까? –

+0

빠른 답장을 보내 주셔서 감사합니다. 예. browser.php 페이지가 완벽하게 작동합니다. 다른 페이지의 iframe도 완벽하게 작동하여 WebGL 콘텐츠를 탐색 할 수 있지만 원형 화살표 탐색기 키는 볼 수 없습니다. 콘솔 오류가 발생하지 않습니다. –

답변

1

내가 알기로 명백한 것은 에 W3C (http://www.w3.org/TR/html-markup/iframe.html#iframe-tags)에 따라 실제로 필요한 닫기 태그가 누락되어 있다는 것입니다.

의 정상적인 동작이 시작되는 것으로 가정합니다. 즉 의 자식은 src을로드 할 수없는 경우에만 표시됩니다. 또는 다른 말로 표현하면, 닫는 태그가 없으면 탐색 요소가 형제 요소가 아닌 "대체"콘텐츠로 처리됩니다.

는 사실, jsFiddle으로 내용을로드하는 것은 나를 증명하는 것 같다http://jsfiddle.net/dRtvH/ - 종료 태그, 아니 회전 목마,하지만 단순히 <iframe>의 폐쇄 O를 버튼 위로 보여 탐색한다/w

+0

와우, 정말 고마워! 나는 닫는 꼬리표를 잊는 지금 진짜로 어리 석다, 느낀다. 바로 전에, iframe의 src 요소를 잊어 버렸고 왜 아무것도 나타나지 않는지 궁금해했습니다. 어쩌면 새 안경을 사야 만 해 실제로 코드를 교정 할 수있었습니다. 어쨌든 덕분에 모든 것이 완벽하게 작동합니다! –

+0

@Bucco 대부분의 경우 닫는 태그는 선택 사항이지만 (사용 된 Doctype에 따라 다름), '