Legacy iframes, что является их полноценной заменой?

Question

Сайт, интенсивно использующий основной фрейм

Я унаследовал устаревшую кодовую базу / веб-сайт, http://ninjawars.net. Фреймы были на месте, прежде чем я начал кодировать на сайте.

Я постоянно слышу о проблемах iframes (безопасность, доступность, проблемы с макетом), и я почти уверен, что iframes не дружелюбны для поисковых систем (большой минус). Мой личный опыт работы с iframes в основном видел проблемы с их временем загрузки (я полагаю, с большими http-запросами?).

Поиск замены для iframes

К сожалению, никто из тех, кто говорит "избавиться от фреймов", также не дает эффективного решения моей ситуации, обычно предполагая, что простое включение содержимого фрейма сделает все радугой и единорогом (например, Преобразование из * 1012 фреймов *). В моем случае решение статического включения для меня почти ничего не делает.

jQuery load () (например, динамическая загрузка содержимого в div) лучше подходит, но преобразование в этот метод займет время и не принесет пользы для поисковых систем или просмотра без javascript. пользователи. jQuery load () устраняет проблему со скоростью, но я не уверен, что она решает проблему доступности. Даже без javascript iframe по-прежнему работают (для ручных кликов), хотя практическая дополнительная поддержка работы iframes под javascript практична, я не уверен.

Потенциальные альтернативы?

• jQuery & load ()
• Полная перезапись сайта на статические страницы с общим заголовком / нижним колонтитулом / боковой панелью + некоторые незначительные опросы JavaScript.

Answer 1

Ифреймы не являются порождением какого-то неназванного демона, как некоторые люди заставили бы вас поверить. У них все еще есть очень полезное место для веб-приложений.

Они определенно , однако, вредны для поисковой оптимизации! Я никогда не рекомендовал бы, чтобы «нормальный» общедоступный веб-сайт использовал их, если бы это не было абсолютно необходимо, особенно если бы SEO было большой проблемой.

Я бы посчитал jQuery хорошим вариантом для решения проблемы доступности. Одна из замечательных особенностей jQuery - это то, что ваш сайт легко изящно ухудшается для тех пользователей, у которых нет поисковых систем, подобных javascript.

По сути, я подхожу к новому общедоступному веб-сайту с помощью jQuery:

1. Создание сайта со статической навигацией. Все блоки контента, которые я обычно получаю по какому-то запросу ajax (в вашем случае, в iframe), я делаю доступным на своей странице. Форма «Свяжитесь с нами» является отличным примером - поместите ее на своей странице для пользователей, не поддерживающих JavaScript, но в конечном итоге она будет загружена с помощью ajax в модальный div для обычных пользователей. Статическая навигация гарантирует, что поисковые системы видят все. В вашем случае замените iframe на div, которые просто содержат ссылку на страницу, которую в настоящее время загружает iframe.

2. Добавить jQuery. Принимая по одной странице за раз, начните заменять все вхождения статических навигационных ссылок вызовами ajax для загрузки нужного контента.

3. Постоянно рефакторинг javascript до тех пор, пока вы не преобразуете его в сценарий, который будет работать со всей навигацией на сайте.

Примером простого изящно разлагаемого сайта является следующий (взято с сайта, над которым я работал):

$(document).ready(function() {

    $("#menu a[href]").each(function() {
        this.href = this.href.replace(/Index/, "Ajax");
    })
    .click(function() {
        $.get(this.href, null, function(data) {
            var $main = $("#main");
            $main.hide();
            $("#main").html(data);
            $main.fadeIn("slow");
        });
        return false;
    });

Этот сценарий выполняется на всех страницах сайта, заменяя любое вхождение "/ Index /" в целевых URL навигации по меню на "/ Ajax /", которое перенаправляет URL на ресурсы, которые возвращают ответы ajax, а затем добавляет обработчик щелчка, который обрабатывает добавление содержимого на страницу.

Теперь поисковые системы и пользователи не-JS могут следить за статической навигацией, а пользователи JS получают более быстрый интерфейс с некоторыми эффектами.

Answer 2

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

1. Создайте страницу таким образом, чтобы левая, правая и верхняя части помещались в свои собственные элементы div, а центральная часть - в элемент * с прокруткой с использованием «overflow: auto».
2. Разбейте левый, правый и верхний делители на их собственные файлы PHP и включите их в каждую страницу. Таким образом, каждая страница будет включать эти файлы, а затем определять уникальный контент в прокручиваемом div.

Конечно, это не самое элегантное решение (я предпочитаю использовать такую ​​библиотеку, как Apache Tiles в Java ). Но это работало хорошо для меня в прошлом. Ключом к тому, чтобы сделать это поддерживаемым, является то, чтобы каждый включаемый файл начинался с тега <div> для этого раздела и заканчивался тегом </div> для этого раздела. Запись включаемых файлов, которые начинаются и заканчиваются на разных уровнях, или оставление открытых разделов, которые должны быть закрыты в другом файле, является причиной серьезных головных болей.

Answer 3

рассматривали ли вы возможность использования возможностей jjuery Ajax в сочетании с плагином history ? Таким образом, вы можете сохранить функциональность браузера в виде кнопки «назад» и обеспечить поддержку закладок без необходимости перезагружать всю статическую страницу во время навигации по сайту. Я не знаю, является ли это дружественным для поисковых систем (хотя мне нравится заставлять себя верить в это).