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

Question

У меня есть страница с фреймом для отображения содержимого нажатой вкладки. Есть 3 вкладки и 1 iframe. Источники содержимого, относящегося к каждой нажатой вкладке, отформатированы и закодированы в других файлах html и css.

Какова другая альтернатива использованию iframe, потому что я заметил, что при нажатии на вкладку все равно отображается белый фон, аналогично тому, когда загружается новая страница?

Вот мой код:

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

Answer 1

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

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

Answer 2

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

Может быть, здесь вам может пригодиться jQuery UI Tab , если вы хотите попробовать.

---

РЕДАКТИРОВАТЬ: пример 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>

Answer 3

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

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

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

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

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

Answer 4

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

<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 не поддерживается (любой современный браузер поддерживает его).

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

Answer 5

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

Answer 6

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

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

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

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

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

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

Answer 7

Вероятно, лучше загружать содержимое каждой вкладки в 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; }

Answer 8

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

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

Что-то вроде этого:

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

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

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

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

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