iframes, pages externes et onglets jQuery ui

Question

J'ai une page avec plusieurs onglets. Chaque onglet contient le contenu d'une autre page Web (vit sur le même serveur, mais répertoire différent, et ils sont tous des sites autonomes). L'intention de la page à onglets est de rassembler les autres pages dans un portail. Cela fonctionne très bien jusqu'à un certain point. Le problème que j'ai avec cette approche est que je dois utiliser les iframes pour charger les autres pages afin de préserver leur CSS et les chemins d'images relatifs, etc. Cela signifie que toutes les pages sont chargées au moment du chargement de la page d'onglets. Ce n'est pas idéal. Je voudrais utiliser ajax pour charger le contenu, mais je ne sais pas comment faire cela en utilisant iframes.

Voici le code que j'ai:

<div id="tabs"> 
<ul> 
<li><a class="tabref" href="#tabs-1">One tab</a></li> 
<li><a class="tabref" href="#tabs-2">two tab</a></li> 
</ul> 
<div id="tabs-1" class="tabMain"> 
<div class="tabIframeWrapper"> 
    <iframe class="tabcontent" src="site1"></iframe> 
</div> 
</div> 

<div id="tabs-2" class="tabMain"> 
<div class="tabIframeWrapper"> 
    <iframe class="tabcontent" src="site2"></iframe> 
</div> 
</div> 

Chaque page est également compris dans son propre style CSS et sa propre URL (site.com/site1 et site.com/site2)

I » d aimer pouvoir utiliser la solution iframes, mais charger chaque page uniquement lorsque son onglet est sélectionné.

TIA

Answer 1

Donnez ce un coup:

Ne pas ajouter même le iframe au balisage du corps de l'onglet. Dynamiquement ajouter si ce n'est pas présent:

$("a.tabref").click(function() { 
    var tab = $(this).attr("href"); 
    if ($(tab).find("iframe").length == 0) { 
    var html = []; 
    html.push('<div class="tabIframeWrapper">'); 
    html.push(' <iframe class="tabcontent" src="site1"></iframe>'); 
    html.push('</div>'); 
    $(tab).append(html.join("")); 
    } 
}); 

Vous auriez besoin une certaine logique là-dedans pour changer réellement l'attribut src de l'iframe en fonction de l'onglet que vous chargez, mais je pense que vous avez l'idée.

Answer 2

Voici une alternative que j'ai trouvée; Je voulais utiliser la structure de tabulation mais utiliser des iframes chargées dynamiquement en même temps. Le code dynamique de redimensionnement de l'iframe ne fonctionne que pour les pages du même site. cela ne fonctionne pas avec les restrictions de script intersite. Testé IE9/FF6/Chrome 13.

<div id="tabs"> 
    <ul> 
     <li><a href="#tab1">My Tab 1</a></li> 
     <li><a href="#tab2">My Tab 2</a></li> 
    </ul> 


    <div id="tab1"> 
    Default content here 
    </div> 

    <div id="tab2" title="myIframeUrl.html"></div> <!-- using title element for url storage --> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#tabs').tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "There was an error loading this content. "); 
       } 
      }, 
      select: function(event, ui) { 
       var pnl = $(ui.panel); 
       var url = pnl.attr('title'); // get url to load from title attr 

       if ((url) && (pnl.find('iframe').length == 0)) { 
        $('<iframe />') 
         .attr({ 
          frameborder: '0', 
          scrolling: 'no', 
          src: url, 
          width: '100%', 
          height: '100%' 
         }) 
         .appendTo(pnl) 
         .load(function() {  // IFRAME resize code 

          var iframe = $(this); // iframe element 
          var win = this.contentWindow; // child window 
          var element = $(win.document); // element to size to; .document may return 0 depending on sizing of document, may have to use another element 

          $(win.document).ready(function() { 
           iframe.height(element.height()); // resize iframe 
          }); 
         }); 
       } 

       return true; 
      } 
     }); 

    }); 
    </script>