Pinterest 및 부트 스트랩 탭

Question

그래서, 내가 탭을 사용하고 있지만, pinterest를 넣을 때 어떤 이유 때문에 탭 내용이 나타나지 않습니다. JsFiffle here

외부는 작동하지만 탭 내부에는로드되지 않습니다. JS 라이브러리 인 경우 이 숨겨져있는 HTML 컨테이너에 초기화 할 때

. 

Answer 1

Google지도, 그리고 분명히 대표자의 공급이 JS를 포함와 같은 타사 JS 기반 라이브러리의 수는 제대로 작동하지 않습니다 초기화 된 (이렇게 다른 방법을 쓰려면, 페이지가로드 될 때 이 인 탭에 Pinterest 피드를 넣으면 작동합니다).

1. HTML 코드 조각을

     <!-- Nav tabs --> 
         <ul id="social-feed-tabs" class="nav nav-tabs"> 
          <li role="presentation" class="active"><a href="#Instagram" aria-controls="Instagram" role="tab" data-toggle="tab">Instagram</a></li> 
          <li role="presentation"><a href="#Pinterest" aria-controls="Pinterest" role="tab" data-toggle="tab" id="PinterestTab">Pinterest</a></li> 
          ... 
         </ul> 
   
         <!-- Tab panes --> 
         <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane active" id="Instagram">...</div> 
          <div role="tabpanel" class="tab-pane" id="Pinterest"> 
           <a data-pin-do="embedUser" href="http://www.pinterest.com/username/" data-pin-scale-width="80" data-pin-scale-height="170" data-pin-board-width="360">Loading Pinterest feed...</a> 
          </div> 
          ... 
         </div> 
   

2. JS 코드

   var isPinterestLoaded = false; 
   
   function handlePinterest() { 
       $('#PinterestTab').click(function() { 
        loadPinterestJs(); 
       }); 
   
   } 
   
   function loadPinterestJs() { 
       if (!isPinterestLoaded) { 
        (function (d) { 
         var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); 
         p.type = 'text/javascript'; 
         p.async = true; 
         p.src = '//assets.pinterest.com/js/pinit.js'; 
         f.parentNode.insertBefore(p, f); 
        }(document)); 
        isPinterestLoaded = true; 
       } 
   } 
   
   handlePinterest(); // You may want to call this on the document.ready event, or similar, depending on your setup. 
   

을 다음과 같이

나는이 문제를 해결하기 위해 관리해야