www w3org specification dinamico javascript html css iframe tabs

w3org - iframe src javascript



¿Mejor alternativa a un iframe? (8)

Como se mencionó, puede usar jQuery u otra biblioteca para recuperar los contenidos del archivo HTML y rellenarlo en el div. Entonces incluso podrías hacer un desvanecimiento elegante para que se vea todo muy bonito.

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

Algo en esta línea:

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

editar ... puedes prepoblar o hacer clic puedes hacer el get dinámicamente

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

Si prepobla puede tener tres contenedores en lugar del que tiene ahora, 2 ocultos, 1 pantalla y las funciones de clic los ocultarán todos, excepto el que desee.

El get es menos código, es más fácil.

Tengo una página con un iframe para mostrar el contenido de la pestaña en la que se hace clic. Hay 3 pestañas y 1 iframe. Las fuentes de los contenidos relacionados con cada pestaña en la que se hace clic están formateadas y codificadas en otros archivos html y css.

¿Cuál es otra alternativa al uso de un iframe, porque noté que cuando se hace clic en la pestaña, todavía muestra el fondo blanco, similar a cuando se carga una página nueva?

Aquí está mi código:

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

El iframe HTML se utilizará para incluir / mostrar contenido no de plantilla , como un archivo PDF. Se considera una mala práctica cuando se utiliza para el contenido de la plantilla (es decir, HTML), tanto en las opiniones de SEO como de UX.

En tu caso, solo quieres tener un panel con pestañas. Esto se puede resolver de varias maneras:

  1. Tenga un montón de enlaces como pestañas y un montón de div como contenido de pestañas. Inicialmente, solo muestre el primer contenido de la pestaña y oculte todos los demás mediante la display: none; CSS display: none; . Use JavaScript para alternar entre pestañas configurando la display: block; CSS display: block; (mostrar) y display: none; (ocultar) en el contenido de la pestaña divs en consecuencia.

  2. Tener un grupo de enlaces como pestañas y un div como contenido de pestañas. Use Ajax para obtener el contenido de la pestaña de forma asincrónica y use JavaScript para reemplazar los contenidos actuales de la pestaña con el nuevo contenido.

  3. Tener un grupo de enlaces como pestañas y un div como contenido de pestañas. Deje que cada enlace envíe un parámetro de solicitud GET diferente o información de ruta que represente la pestaña en la que se hace clic. Utilice el control de flujo del lado del servidor (PHP if() o JSP''s <c:if> , etc.) o incluya capacidades (PHP''s include() , o JSP''s <jsp:include> , etc.) para incluir el contenido de pestañas deseado dependiendo de el parámetro / pathinfo.

Cuando vaya por el enfoque basado en JavaScript, puedo recomendar encarecidamente adoptar jQuery para esto.

Este es un ejemplo de jQuery que incluye otra página html en su documento. Esto es mucho más amigable con el SEO que el iframe . Para estar seguro de que los bots no indexan la página incluida, solo agréguela para no permitirla en el 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>

También puede incluir jQuery directamente de Google: http://code.google.com/apis/ajaxlibs/documentation/ - esto significa la inclusión automática opcional de las versiones más nuevas y un aumento significativo de la velocidad. Además, significa que debe confiar en ellos para que le entregue solo el jQuery;)

La única alternativa para usar IFRAME para cargar contenido dinámico (después de que la página se haya cargado) es usar AJAX para actualizar un contenedor en su página web. Es bastante elegante y generalmente más rápido que cargar una estructura de página completa en un IFRAME.

No necesitas 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>

Además de este CSS, en la mayoría de los navegadores: .tab:not(:target) { display: none !important; } .tab:not(:target) { display: none !important; } , que se establece de manera predeterminada en todo el contenido visible si: target no es compatible (cualquier navegador moderno lo admite).

Si muestra contenido con script, siempre ocultelo con script. Deje que se degrade con gracia si ese script no se ejecuta.

Otra alternativa es usar AJAX para cargar el contenido de una pestaña y usar un div para mostrar el contenido. Sugeriría que usar una biblioteca Tab existente podría ser una opción en lugar de tratar de resolver todos los problemas asociados con la creación de pestañas.

Tal vez la pestaña jQuery UI pueda ser útil aquí si te gusta probarla.

EDIT: ejemplo AJAX con UI Tabs.

Primero, el HTML se verá así.

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

Luego, asegúrese de importar los archivos jQuery apropiados:

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

A continuación, agregue el código para crear las pestañas:

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

Probablemente sea mejor cargar el contenido de cada pestaña en los DIV en la misma página y luego cambiar la visibilidad de cada DIV cuando se hace clic en un botón de tabulación utilizando JavaScript y la propiedad de visualización de CSS.

Si no puede hacer eso, entonces iframe es probablemente la mejor solución. Puede hacer que el fondo del iframe sea transparente, ver a continuación:

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

Debería agregar el siguiente CSS al elemento BODY usando:

BODY { Background: transparent; }

¡Hay una alternativa a AJAX !

Puede cargar TODOS los tres contenidos posibles en DIV separados.

Luego, al hacer clic en una pestaña, simplemente se mostrará el atributo de visualización del "bloque" DIV del contenido apropiado, mientras que las propiedades de visualización de los otros dos DIV serán "ninguna".

Barato, fácil, no requiere costos AJAX para solicitud http adicional o para la codificación.

Eso sí, AJAX es una mejor solución si el contenido de las pestañas cambia dinámicamente según otros datos, en lugar de ser conocido en el momento en que se carga la página.