Лучшая альтернатива iframe?

Единственная альтернатива использованию IFRAME для загрузки динамического контента (после загрузки страницы) - это использование AJAX для обновления контейнера на вашей веб-странице. Это довольно элегантно и обычно быстрее, чем загрузка полной структуры страницы в IFRAME.

• Ajax с JQuery (используйте это, и вы будете любимы на SO; функции AJAX великолепны и просты)
• Ajax с прототипом
• Ajax с MooTools
• Автономный Ajax с набором инструментов AJAX Мэтта Крузе (Используется, чтобы использовать это сегодня, используя JQuery, потому что мне нужна была среда)
• AJAX с Dojo ( Говорят, что быстро, но AJAX не так просто)

Есть альтернатива AJAX !

Вы можете загрузить ВСЕ три возможных содержимого в отдельные DIV.

Затем, щелкнув вкладку, вы просто сделаете атрибут отображения «блока» DIV соответствующего содержимого, а свойство отображения двух других DIV «none».

Дешево, легко, не требует затрат AJAX для дополнительного http-запроса или для кодирования.

Напомним, что AJAX является лучшим решением, если содержимое вкладок будет динамически меняться в зависимости от других данных, а не быть известным во время загрузки страницы.

Вам не нужен скрипт.

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

Плюс это CSS, в большинстве браузеров: .tab: нет (: target) {display: нет! Важно; } , который по умолчанию для всех видимых контента видно, если: Target не поддерживается (любой современный браузер поддерживает его).

Если вы показываете контент со скриптом, всегда скрывайте его скриптом. Пусть это изящно ухудшается, если этот скрипт не работает.

Как уже упоминалось, вы можете использовать jQuery или другую библиотеку для получения содержимого файла HTML и заполнить его в Div. Тогда вы могли бы даже сделать воображение, чтобы заставить его выглядеть все красиво.

http://docs.jquery.com/ajax/jquery.get

Что-то вдоль этих строк:

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

Редактировать .. Вы можете подпутать или OnClick вы можете сделать динамически

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

, если вы предоплатаете, могут иметь три контейнера вместо того, чтобы у вас сейчас, 2 скрытых, 1 дисплей, и функции щелчка будут скрывать их все, кроме того, которые вы хотите.

Получение меньше кода, хотя и проще времени.

Другая альтернатива - использовать AJAX для загрузки содержимого вкладки и использовать DIV для отображения содержимого. Я бы предположил, что использование существующей библиотеки вкладки может быть вариантом, а не пытаясь решить все проблемы, связанные с созданием вкладок.

Может быть, вкладка jQuery Ui может быть полезной здесь, если вы хотите попробовать его.

Редактировать: Пример AJAX с помощью пользовательских пользовательских пользователей.

Во-первых, HTML будет выглядеть так.

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

Затем убедитесь, что вы импортируете соответствующие файлы jQuery:

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

затем добавьте код для создания вкладок:

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

, вероятно, лучше загрузить в контент Для каждой вкладки в Divs на той же странице, а затем переключите видимость каждого Div, когда кнопка вкладки нажала с помощью JavaScript и свойство CSS-дисплея.

Если вы не можете сделать это, то Iframe, вероятно, лучшее решение. Вы можете сделать прозрачный фон IFrame, см. Ниже:

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

Вам нужно будет добавить следующие CSS в элемент тела, используя:

BODY { Background: transparent; }

HTML iframe должен использоваться для включения/отображения не шаблонного содержимого , например, PDF-файла. Это считается плохой практикой при использовании для содержимого шаблонов (т.е. HTML), как в SEO, так и в UX мнениях.

В вашем случае вы просто хотите иметь панель с вкладками. Это можно решить несколькими способами:

1. Иметь кучу ссылок в виде вкладок и кучу div в виде содержимого вкладок. Изначально показывайте только содержимое первой вкладки и скрывайте все остальные с помощью CSS display: none;. Используйте JavaScript для переключения между вкладками, установив CSS display: block; (show) и display: none; (hide) на divs содержимого вкладки соответственно.

2. Имеют кучу ссылок в виде вкладок и один div в виде содержимого вкладок. Используйте Ajax, чтобы получить содержимое вкладки асинхронно и использовать JavaScript, чтобы заменить текущее содержимое вкладки на новое содержимое.

3. Иметь кучу ссылок в виде вкладок и один div в виде содержимого вкладок. Пусть каждая ссылка отправляет свой параметр GET-запроса или pathinfo, представляющий кликнувшую закладку. Используйте управление потоком на стороне сервера (PHP if(), или JSP и т.д.) или включите возможности (PHP include(), или JSP и т.д.), чтобы включить требуемое содержимое закладок в зависимости от параметра/пути информации.

При переходе к подходу, основанному на JavaScript, я могу горячо порекомендовать использовать для этого jQuery.

Это пример jQuery , который включает другую страницу html в ваш документ. Это намного удобнее для SEO, чем iframe . Чтобы быть уверенным, что боты не индексируют включенную страницу, просто добавьте ее для запрета в 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>

Вы также можете включить jQuery прямо из Google: http://code.google.com / apis / ajaxlibs / documentation / - это означает необязательное автоматическое включение новых версий и некоторое значительное увеличение скорости. Кроме того, это означает, что вы должны доверять им в доставке только jQuery;)