альтернатива iframe

Question

Прежде чем задать свой вопрос, я прошел через это: Лучшая альтернатива iframe? и не нашел решения своей проблемы, или, возможно, я не правильно понял!

У меня есть HTML-страница, которая содержит дерево Dojo с левой стороны.Когда я нажимаю на элемент в левом дереве (скажем, element1), я загружаю iframe справа с URL:

www.something.com?selected=element1

Теперь источником фрейма является jsp, который делает это:

<% 
/* Get the user selection*/
String selectedElement = request.getParameter("selected");

/* Code to Fetch some content from the database using the above string */
%>

Поскольку в левом дереве много элементов, нажатие на каждый элемент загружает iframe с правой стороны, как указано выше.Аранжировка работает отлично.Но мне интересно, если это лучший способ сделать это?Могу ли я как-то не использовать фреймы и все же получить тот же результат?Я где-то читал, что загрузка iframes в несколько раз медленнее, чем загрузка iframes.Любая помощь будет оценена!

Answer 1

Если ссылки находятся в одном домене, вы можете использовать загрузку jQuery для заполнения DIV вместо iframe. Это было бы намного лучше с организационной точки зрения и значительно упростило бы навигацию по вашей странице для людей с проблемами доступности. Если контент из другого домена, вы застреваете в iframe, если не обрабатываете запросы на своем сервере.

<div id="menu">
    <a class="menu-item" href="/?selected=foo">Foo</a>
    <a class="menu-item" href="/?selected=bar">Bar</a>
    ...
</div>

<div id="content">
  ...default content...
</div>

<script type="text/javascript">
   $(function() {
       $('.menu-item').click( function() {
           $('#content').load( $(this).attr('href') );
           return false;
       });
   });
</script>

Пример Dojo

<script type="text/javascript">
   dojo.ready( function() {
       dojo.query('.menu-item').onclick( function() {
           dojo.xhrGet({
              url: dojo.attr(this,'href');
              load: function(content) {
                   dojo.byId('content').innerHtml = content;
              }
           });
           return false;
       });
   });
</script>

Answer 2

Использование фреймов для включения фрагментов страницы, полученных с того же сервера , что и родительской страницы, очень плохо для SEO и взаимодействия с пользователем. Боты не индексируют содержимое iframe как часть родительской страницы. Ctrl + Нажатие или копирование ссылок, которые должны заканчиваться в iframe, может вызвать "wtf?" переживания конечного пользователя при просмотре результата.

Просто используйте серверную часть, как <jsp:include>.

<jsp:include page="${param.selected}.jsp" />

Укажите element1.jsp и т. Д.

Ajax-загрузка также является опцией, но, пожалуйста, сделайте это ненавязчиво (т. Е. Она должна работать так же, как при отключенном JS, посмотрите, как это продемонстрировал tvanfosson). Таким образом, вы достигнете более широкой аудитории и лучшего SEO.