web-dev-qa-db-fra.com

Meilleure alternative à un iframe?

J'ai une page avec un iframe pour présenter le contenu de l'onglet cliqué. Il y a 3 onglets et 1 iframe. Les sources des contenus relatifs à chaque onglet cliqué sont formatées et codées dans d'autres fichiers html & css.

Quelle est une autre alternative à l'utilisation d'un iframe, car j'ai remarqué que lorsque l'onglet est cliqué, il affiche toujours le fond blanc, comme lors du chargement d'une nouvelle page?

Voici mon code:

<div id="tabs">
<div id="overview">
  <a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
  <a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
  <a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>

<div id="tabs-1">
  <iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
  </iframe>
</div>
javascripthtmlcssiframetabs
26
laura

La seule alternative à l'utilisation des IFRAME pour charger du contenu dynamique (après le chargement de la page) est d'utiliser AJAX pour mettre à jour un conteneur sur votre page Web. C'est assez élégant et généralement plus rapide que de charger une structure de page complète dans un IFRAME.

15
Pekka 웃

Une autre alternative consiste à utiliser AJAX pour charger le contenu d'un onglet et utiliser un div pour afficher le contenu. Je suggère que l'utilisation d'une bibliothèque d'onglets existante pourrait être une option plutôt que d'essayer de tout résoudre les problèmes liés à la création d'onglets.

Peut-être que jQuery UI Tab pourrait être utile ici si vous aimez l'essayer.

EDIT: AJAX exemple avec les onglets de l'interface utilisateur.

Tout d'abord, le HTML ressemblera à ceci.

   <div id="tabs">
     <ul>
      <li><a href="toframe.html"><span>Overviews</span></a></li>
      <li><a href="tawagpinoygallery.html"><span>Gallery</span></a></li>
      <li><a href="trframe.html"><span>Reviews</span></a></li>
     </ul>
   </div>

Assurez-vous ensuite d'importer les fichiers jQuery appropriés:

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  etc...

Ajoutez ensuite le code pour créer les onglets:

   <script type="text/javascript">
$(function() {
    $("#tabs").tabs();
});
</script>
13
Vincent Ramdhanie

Il existe une alternative à AJAX!

Vous pouvez charger TOUS les trois contenus possibles dans des DIV séparés.

Cliquer ensuite sur un onglet rendra simplement l'attribut d'affichage du "bloc" DIV du contenu approprié tout en rendant la propriété d'affichage des deux autres DIV "aucune".

Pas cher, facile, ne nécessite pas AJAX coûte pour une demande http supplémentaire ou pour le codage.

Attention, AJAX est une meilleure solution si le contenu des onglets change dynamiquement en fonction d'autres données au lieu d'être connu au moment du chargement de la page.

5
DVK

Vous n'avez pas besoin de script.

<ul><li><a href="#foo">foo link</a><li><a href="#bar">bar link</a></ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>

De plus, ce CSS, dans la plupart des navigateurs: .tab:not(:target) { display: none !important; }, qui par défaut à tout le contenu visible si: cible n'est pas pris en charge (tout navigateur moderne le prend en charge).

Si vous affichez du contenu avec un script, masquez-le toujours avec un script. Laissez-le se dégrader gracieusement si ce script ne s'exécute pas.

2
Anonymous

Le HTML iframe doit être utilisé pour inclure/afficher le contenu non modèle , tel qu'un fichier PDF . Il est considéré comme une mauvaise pratique lorsqu'il est utilisé pour le contenu d'un modèle (c'est-à-dire HTML), dans les opinions SEO et UX.

Dans votre cas, vous voulez simplement avoir un panneau à onglets. Cela peut être résolu de plusieurs manières:

  1. Avoir un tas de liens sous forme d'onglets et un tas de div comme contenu d'onglet. Initialement, affichez uniquement le premier contenu de l'onglet et masquez tous les autres à l'aide de CSS display: none;. Utilisez JavaScript pour basculer entre les onglets en définissant CSS display: block; (Afficher) et display: none; (Masquer) sur les divs de contenu de l'onglet en conséquence.

  2. Avoir un tas de liens sous forme d'onglets et une div comme contenu d'onglet. Utilisez Ajax pour obtenir le contenu de l'onglet de manière asynchrone et utilisez JavaScript pour remplacer le contenu de l'onglet actuel par le nouveau contenu.

  3. Avoir un tas de liens sous forme d'onglets et une div comme contenu d'onglet. Laissez chaque lien envoyer un paramètre de requête GET différent ou pathinfo représentant l'onglet cliqué. Utilisez le contrôle de flux côté serveur (PHP if() ou JSP <c:if>, Etc.) ou incluez des capacités (PHP include() ou JSP <jsp:include>, Etc.) pour inclure le contenu de l'onglet souhaité en fonction du paramètre/pathinfo.

En optant pour l'approche basée sur JavaScript, je peux chaudement recommander d'adopter jQuery pour cela.

1
BalusC

C'est jQuery exemple qui inclut une autre page html dans votre document. C'est beaucoup plus convivial pour le référencement que iframe. Pour être sûr que les bots n'indexent pas la page incluse, il suffit de l'ajouter à interdire dans robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript">
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

Vous pouvez également inclure jQuery directement à partir de Google: http://code.google.com/apis/ajaxlibs/documentation/ - cela signifie une inclusion automatique facultative des versions plus récentes et une augmentation significative de la vitesse. Cela signifie également que vous devez leur faire confiance pour ne vous fournir que le jQuery;)

1
sorin

Comme mentionné, vous pouvez utiliser jQuery ou une autre bibliothèque pour récupérer le contenu du fichier HTML et le remplir dans le div. Ensuite, vous pouvez même faire un fondu fantaisie pour le rendre joli.

http://docs.jquery.com/Ajax/jQuery.get

Quelque chose dans ce sens:

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});

modifier .. vous pouvez préremplir ou cliquer sur, vous pouvez faire le get dynamiquement

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})

Si vous préremplissez pourrait avoir trois conteneurs au lieu de celui que vous avez maintenant, 2 masqués, 1 affichage, et les fonctions de clic les masqueront tous sauf celui que vous voulez.

Cependant, le get est moins de code, plus facile.

1
neatlysliced

Il est probablement préférable de charger le contenu de chaque onglet dans les DIV sur la même page, puis de changer la visibilité de chaque DIV lorsqu'un bouton d'onglet est cliqué à l'aide de JavaScript et de la propriété d'affichage CSS.

Si vous ne pouvez pas le faire, alors iframe est probablement la meilleure solution. Vous pouvez rendre l'arrière-plan iframe transparent, voir ci-dessous:

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

Vous devrez ensuite ajouter le CSS suivant à l'élément BODY en utilisant:

BODY { Background: transparent; }
1
Camsoft