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

Ответ 1

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

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

Ответ 2

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

Возможно, здесь может быть полезно вкладка jQuery UI, если вы хотите попробовать.

EDIT: пример 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>

Ответ 3

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

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

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

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

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

Ответ 4

Вам не нужно 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>

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

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

Ответ 5

Как уже упоминалось, вы можете использовать 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...
})

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

В результате получается меньше кода, тем легче время.

Ответ 6

Вероятно, лучше загружать содержимое каждой вкладки в DIV на одной странице, а затем переключать видимость каждого DIV при нажатии кнопки вкладки с использованием JavaScript и свойства отображения CSS.

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

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

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

BODY { Background: transparent; }

Ответ 7

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

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

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

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

• Имейте кучу ссылок в виде вкладок и один div в качестве содержимого вкладки. Пусть каждая ссылка отправляет другой параметр запроса GET или pathinfo, представляющий вкладку кликов. Используйте управление потоком на стороне сервера (PHP if() или JSP <c:if> и т.д.) Или включите возможности (PHP include() или JSP <jsp:include> и т.д.), Чтобы включить нужное содержимое вкладки в зависимости от параметра /pathinfo.

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

Ответ 8

Это 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;)